jEasyUI はチェックボックスのあるツリーメニューを作成します

jEasyUI でチェックボックス付きツリーメニューを作成する: 複数選択を簡単に実現

この記事では、jEasyUI フレームワークを使用してチェックボックス付きのツリーメニューを作成する方法を詳しく解説します。コード例と解説を提供することで、この便利なテクニックを素早く習得し、ユーザーインターフェースの操作性を向上させるのに役立ちます。

jEasyUI ツリーメニューの概要

jEasyUI は、jQuery ベースの UI フレームワークであり、機能豊富なコンポーネントライブラリを提供しています。その中には、強力なツリーメニューコンポーネントが含まれています。
ツリーメニューは、多層データ構造を明確に表示することができ、ノードの展開、折りたたみ、選択などの操作をサポートしています。

チェックボックス付きツリーメニューの作成手順

jEasyUI 関連ファイルの読み込み: jQuery ライブラリ、jEasyUI コアファイル、CSS ファイルを含めます。
データソースの準備: ノード情報を含む JSON 配列を定義します。各ノードには、id、text、children などのプロパティが含まれます。children は、子ノードを表すために使用されます。
ツリーメニューコンテナの作成: HTML ページに <ul> 要素を追加して、ツリーメニューのコンテナとして使用し、関連する属性を設定します。
ツリーメニューの初期化: jQuery セレクタを使用してツリーメニューコンテナを選択し、.tree() メソッドを呼び出して初期化し、関連する設定パラメータを渡します。
- checkbox: true: チェックボックス機能を有効にします。
- data: データソース: ツリーメニューのデータソースを設定します。
- onCheck: ノード選択イベント処理関数をバインドします。

サンプルコードと解説

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI でチェックボックス付きツリーメニューを作成する</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>チェックボックス付きツリーメニュー</h2>
    <ul id="tt"></ul>

    <script type="text/javascript">
        $(function () {
            $('#tt').tree({
                checkbox: true,
                data: [
                    {
                        id: 1,
                        text: 'ノード1',
                        children: [
                            { id: 11, text: 'ノード1-1' },
                            { id: 12, text: 'ノード1-2' }
                        ]
                    },
                    {
                        id: 2,
                        text: 'ノード2',
                        children: [
                            { id: 21, text: 'ノード2-1' },
                            { id: 22, text: 'ノード2-2' }
                        ]
                    }
                ],
                onCheck: function (node, checked) {
                    // ノード選択イベント処理
                    console.log(node.text + (checked ? ' が選択されました' : ' が選択解除されました'));
                }
            });
        });
    </script>
</body>
</html>

コードはまず、jEasyUI 関連ファイルを読み込みます。
次に、JSON 配列を定義して、ツリーメニューのデータソースとして使用します。
その後、$('#tt').tree() を使用してツリーメニューを初期化し、checkbox: true を設定してチェックボックスを有効にします。
最後に、onCheck イベント処理関数をバインドして、ノードの選択状態の変化を監視します。

まとめ

上記の手順に従うことで、jEasyUI を使用してチェックボックス付きのツリーメニューを簡単に作成し、ユーザーによりフレンドリーで便利な操作体験を提供できます。 jEasyUI は、豊富な API とイベントも提供しているため、実際のニーズに応じて柔軟にカスタマイズおよび拡張できます。

Q&A

質問	回答
子ノードの選択状態を親ノードに反映させるにはどうすればよいですか？	`onCheck` イベントで `$('#tt').tree('checkState', node.target);` を使用して、親ノードのチェック状態を更新できます。
特定のノードをプログラムで選択するにはどうすればよいですか？	`$('#tt').tree('check', node.target);` を使用して、特定のノードを選択できます。
チェックボックス付きのツリーメニューで、選択されたノードの ID を取得するにはどうすればよいですか？	`$('#tt').tree('getChecked');` を使用して、選択されたすべてのノードを取得し、ループ処理して ID を取得できます。

jEasyUI でチェックボックス付きツリーメニューを作成する: 複数選択を簡単に実現

jEasyUI ツリーメニューの概要

チェックボックス付きツリーメニューの作成手順

サンプルコードと解説

まとめ

関連文献

Q&A