Jquery EasyUI中Tree树控件结构应用案例讲解

Tree树控件使用$.fn.tree.defaults重写默认值对象，在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

        定义静态的html使用Tree树控件，标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中，以下显示的元素将被用作树节点嵌套在<ul>元素中，具体代码如下：

<ul id="yoodb" class="easyui-tree">   
    <li>   
<span>Folder 1</span>   
<ul>   
    <li>   
<span>Sub Folder 1</span>   
<ul>   
    <li>   
<span><a href="#">File 1</a></span>   
    </li>   
    <li>   
<span>File 2</span>   
    </li>   
    <li>   
<span>File 3</span>   
    </li>   
</ul>   
    </li>   
    <li>   
<span>Sub File 2</span>   
    </li>   
    <li>   
<span>Sub File 3</span>   
    </li>   
</ul>   
    </li>   
    <li>   
<span>Folder 2</span>   
    </li>   
</ul>

定义在一个空<ul>元素利用Jquery加载数据，具体代码如下：

<ul id="yoodb"></ul>

$('#yoodb').tree({    
    url:'tree_data.action'   
});

EasyUI使用loadFilter函数处理，JSON数据代码如下：

$('#yoodb').tree({    
    url:'tree_data.action',
    loadFilter: function(data){    
if (data.result){    
    return data.result;    
} else {    
    return data;
}    
    }    
});

注意：loadFilter类型(function) 返回过滤的数据去显示。这个函数需要一个参数'data'，表示原始数据。你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有'total'和'rows'特性。

树控件数据格式化，每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。

text：显示节点文本。

state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。

checked：表示该节点是否被选中。

attributes: 被添加到节点的自定义属性。

children: 一个节点数组声明了若干节点。