jQuery EasyUI データグリッドとツリープラグイン -Tree ツリー

jQuery EasyUI プラグイン

依存

• draggable
• droppable

使用法

ツリー（tree）は <ul> 要素内に定義されます。このマークアップはリーフノードと子ノードを定義できます。ノードは ul リスト内の <li> 要素になります。以下に、ul 要素内にネストされたツリーノードを作成するために使用される要素を示します。

<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="../index.html">File 11</a></span></li>
                    <li><span>File 12</span></li>
                    <li><span>File 13</span></li>
                </ul>
            </li>
            <li><span>File 2</span></li>
            <li><span>File 3</span></li>
        </ul>
    </li>
    <li><span>File21</span></li>
</ul>

ツリー（Tree）は空の <ul> 要素内に定義し、javascript を使用してデータを読み込むこともできます。

<ul id="tt"></ul>

$('#tt').tree({
    url:'tree_data.json'
});

loadFilter を使用して、ASP.NET Web サービスからの json データを処理します。

$('#tt').tree({
    url: ...,
    loadFilter: function(data){
        if (data.d){
            return data.d;
        } else {
            return data;
        }
    }
});

ツリーのデータ形式（Tree Data Format）

各ノードには次の属性を含めることができます：

• id: ノードの id。リモートデータを読み込む際に重要です。
• text: 表示するノードのテキスト。
• state: ノードの状態。'open' または 'closed'。デフォルトは 'open' です。'closed' に設定すると、そのノードには子ノードがあり、リモートサイトから子ノードが読み込まれます。
• checked: ノードが選択されているかどうかを示します。
• attributes: ノードに追加するカスタム属性。
• children: 子ノードを定義するノード配列。

例：

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

非同期ツリー

ツリーは組み込みの非同期読み込みモードをサポートしているため、ユーザーは空のツリーを作成し、要件に応じてツリーを非同期に埋めるための JSON データを動的に返すサーバーサイドを指定できます。以下は例です：

<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

ツリーは URL 'get_data.php' を介して読み込まれます。子ノードは親ノードの状態に応じて読み込まれます。閉じたノードを展開するとき、そのノードに子ノードが読み込まれていない場合、定義された URL を介してサーバーにノードの id 値を 'id' という名前の http リクエストパラメータとして送信し、子ノードを取得します。

サーバーから返されるデータを見てください：

[{
    "id": 1,
    "text": "Node 1",
    "state": "closed",
    "children": [{
        "id": 11,
        "text": "Node 11"
    },{
        "id": 12,
        "text": "Node 12"
    }]
},{
    "id": 2,
    "text": "Node 2",
    "state": "closed"
}]

ノード 1 とノード 2 は閉じています。ノード 1 を展開すると、その子ノードが直接表示されます。ノード 2 を展開すると、サーバーに value(2) が送信され、子ノードが取得されます。

本チュートリアルの非同期ツリーの作成要件に応じてツリーのデータを返すサーバーコードの記述方法を示しています。

属性

$('#tt').tree({
    data: [{
        text: 'Item1',
        state: 'closed',
        children: [{
            text: 'Item11'
        },{
            text: 'Item12'
        }]
    },{
        text: 'Item2'
    }]
});

$('#tt').tree({
    formatter:function(node){
        return node.text;
    }
});

イベント

多くのイベントのコールバック関数には 'node' パラメータが必要です。これには次の属性が含まれます：

• id: ノードにバインドされる識別値。
• text: 表示するテキスト。
• iconCls: アイコンを表示するための css class。
• checked: ノードが選択されているかどうか。
• state: ノードの状態。'open' または 'closed'。
• attributes: ノードにバインドされるカスタム属性。
• target: ターゲットの DOM オブジェクト。

$('#tt').tree({
    onClick: function(node){
        alert(node.text);  // alert node text property when clicked
    }
});

// right click node and then display the context menu
$('#tt').tree({
    onContextMenu: function(e, node){
        e.preventDefault();
        // select the node
        $('#tt').tree('select', node.target);
        // display context menu
        $('#mm').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    }
});

// the context menu is defined as below:
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
    <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>

メソッド

var nodes = $('#tt').tree('getChecked');    // get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');    // get unchecked nodes
var nodes = $('#tt').tree('getChecked', 'indeterminate');    // get indeterminate nodes
var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']);    // get checked and indeterminate nodes

// find a node and then select it
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);

// append some nodes to the selected node
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
    parent: selected.target,
    data: [{
        id: 23,
        text: 'node23'
    },{
        text: 'node24',
        state: 'closed',
        children: [{
            text: 'node241'
        },{
            text: 'node242'
        }]
    }]
});

var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('insert', {
        before: node.target,
        data: {
            id: 21,
            text: 'node text'
        }
    });
}

// update the selected node text
var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('update', {
        target: node.target,
        text: 'new text'
    });
}

jQuery EasyUI プラグイン