43. Tree 树

使用$.fn.tree.defaults重写默认值对象。

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

依赖关系

• draggable
• droppable

使用案例

树控件使用 <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="#">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>

树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

<ul id="tt"></ul>
$('#tt').tree({
    url:'tree_data.json'
});

使用loadFilter函数处理来自Web Services的JSON数据。

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

树控件数据格式化

每个节点都具备以下属性：

• 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。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为’id’，通过URL发送到服务器上面检索子节点。

下面是从服务器端返回的数据。

[{
    "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的时候它将发送值(2)到服务器获取子节点。

属性

代码示例：

data:

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

formatter:

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

事件

很多事件的回调函数都包含’node’参数，其具备如下属性：

• id：绑定节点的标识值。
• text：显示的节点文本。
• iconCls：显示的节点图标CSS类ID。
• checked：该节点是否被选中。
• state：节点状态，‘open’ 或 ‘closed’。
• attributes：绑定该节点的自定义属性。
• target：目标DOM对象。

代码示例：

onClick:

$('#tt').tree({
    onClick: function(node){
        alert(node.text);  // 在用户点击的时候提示
    }
});

onContextMenu:

// 右键点击节点并显示快捷菜单
$('#tt').tree({
    onContextMenu: function(e, node){
        e.preventDefault();
        // 查找节点
        $('#tt').tree('select', node.target);
        // 显示快捷菜单
        $('#mm').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    }
});

// 右键菜单定义如下：
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
    <div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>

方法

代码示例：

getChecked:

var nodes = $('#tt').tree('getChecked');    // get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');   // 获取未选择节点
var nodes = $('#tt').tree('getChecked', 'indeterminate');   // 获取不确定的节点

译者注：（1.3.4新增获取方式）

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

find:

// 查找一个节点并选择它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);

append:

// 追加若干个节点并选中他们
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'
        }]
    }]
});

insert:

下面的代码展示了如何将一个新节点插入到选择的节点之前：

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

译者注：（1.3.4新增insert方式）

var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('insert', {
        before: node.target,
        data: [{
            id: 23,
            text: 'node23'
                    },{
                text: 'node24',
                        state: 'closed',
            children: [{
            text: 'node241'
            },{
            text: 'node242'
            }]
                    }]
    });
}

update:

// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('update', {
        target: node.target,
        text: 'new text'
    });
}

doFilter:

$('#tt').tree('doFilter', 'easyui');
$('#tt').tree('doFilter', '');  // 清除过滤器