Tree后台组件实现

Tree后台实现

tree组件简介

Tree（树）
使用$.fn.tree.defaults重写默认值对象。

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

创建Tree组件

可以使用（mx.Tree）标签定义一个Tree组件 如果你打算在其他地方引用这个组件 需要指定个id值 Tree组件通常从一个层次的数据提供者那里获取所用的数据 例如一个XML结构 如果Tree组件需要动态的表现变动数据 你必须使用一个集合 如标准的ArrayCollection或者XMLListCollection对象做为它的数据提供者
Tree组件使用data descriptor实列 但是你也可以创建自己的类 并且指定它做为Tree组件的dataDescriptor属性
DefaultDataDescriptor类支持如下的数据类型：
集合 集合实现 如XMLlistCollection或ArrayCollextion对象 DefaultDataDescriptor类包含代码用于更加有效的处理集合 往往使用集合作为数据提供者当数据在动态改变 否则 Tree组件可能会显示那些过时的数据

案例1

树控件使用（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;    
        }    
    }    
});  

案例2

上图的代码块如下：
先建包和类

然后就是导jar包：

因为代码块太多了我就没有放代码了昂

总结

今天的内容呢 就到这里了 还是那句话 加油哦!哈哈哈哈哈