jQuery EasyUI 数据网格与树插件 – Tree 树

通过 $.fn.tree.defaults 重写默认的 defaults。

树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。

依赖

• draggable
• droppable

用法

树（tree）定义在 <ul> 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 <li> 元素。下面演示了将被用于制作嵌套在 ul 元素内的树节点的元素。

<ul id="tt">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="#">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 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">
    <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'
    });
}