Tree Document

使用$.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>  
<script>
$('#tt').tree({    
    url:'tree_data.json'   
});
</script>
					
				

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

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

树控件数据格式化：

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

一些案例：

					
[{    
    "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)到服务器获取子节点。

属性：

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

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

事件：

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

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

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

// 右键菜单定义如下：

<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>
							
						

方法：

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

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

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

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

							
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'
        }]
                  }]
  });
}
							
						

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

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