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包:
因为代码块太多了我就没有放代码了昂
总结
今天的内容呢 就到这里了 还是那句话 加油哦!哈哈哈哈哈