jEasyUI はマークアップを使用してツリー メニューを作成します

jEasyUI を使用したタグによるツリーメニューの作成

この記事では、jEasyUI フレームワークと HTML タグを使用して、機能豊富なツリーメニューを簡単に作成する方法を詳しく説明します。

1. 必要なファイルのインポート

- まず、HTML ページに jQuery と jEasyUI の関連する CSS と JavaScript ファイルがインポートされていることを確認してください。 

<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>

2. HTML タグ構造の記述

- `
    ` と `
  • ` タグを使用して、ツリーメニューの階層構造を構築します。 - 各 `
  • ` 要素は、ツリーノードを表します。 - `data-options` 属性を使用して、各ノードにテキスト、状態（開く/閉じる）などの関連属性を設定します。 
    
<ul>
    <li data-options="text:'マイドキュメント',state:'closed'">
        <ul>
            <li data-options="text:'写真'">
                <ul>
                    <li data-options="text:'友達'"></li>
                    <li data-options="text:'妻'"></li>
                </ul>
            </li>
            <li data-options="text:'プログラムファイル'"></li>
        </ul>
    </li>
    <li data-options="text:'デスクトップ'"></li>
    <li data-options="text:'ごみ箱'"></li>
</ul>

    3. ツリーメニューの初期化

    - jQuery セレクターを使用して `
      ` 要素を選択し、`.tree()` メソッドを呼び出してツリーメニューとして初期化します。 
      
$(function(){
    $('ul').tree();
});

      4. ノード属性の設定

      | 属性 | 説明 | |----------|------------------------------------| | `text` | ノードに表示されるテキスト | | `state` | ノードの初期状態 ('open', 'closed') | | `iconCls` | ノードのアイコンスタイル | | `checked` | ノードが選択されているかどうか (true, false) | | `attributes` | ノードにカスタム属性を追加する |

      5. ツリーメニューイベント

      | イベント名 | 説明 | |----------------------|----------------------------------------------------| | `onClick` | ノードがクリックされたときにトリガーされます。 | | `onDblClick` | ノードがダブルクリックされたときにトリガーされます。 | | `onBeforeLoad` | ノードが子ノードを読み込む前にトリガーされます。 | | `onLoadSuccess` | ノードが子ノードの読み込みに成功した後にトリガーされます。 |

      まとめ

      上記の手順に従うことで、jEasyUI フレームワークとシンプルな HTML タグを使用して、機能豊富なツリーメニューを簡単に作成できます。jEasyUI は、豊富な構成オプションとイベントを提供しているため、実際のニーズに応じてツリーメニューの外観と動作をカスタマイズできます。

      関連するQ&A

      **Q1: jEasyUI ツリーでノードを動的に追加するにはどうすればよいですか？** **A1:** `append` メソッドを使用して、既存のノードに新しい子ノードを追加できます。 **Q2: jEasyUI ツリーでノードの選択状態を取得するにはどうすればよいですか？** **A2:** `getSelected` メソッドを使用して、現在選択されているノードを取得できます。 **Q3: jEasyUI ツリーでノードを展開および折りたたむにはどうすればよいですか？** **A3:** `expand` および `collapse` メソッドを使用して、ノードを展開および折りたたむことができます。