easyui的Tree框架
欢迎大家转载，转载请注明出处！ 希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！ 今天是easyui的Tree框架：
个人觉得easyui的Tree框架是比较难搞的，尤其是拼接tree的json数据的时候，稍有差池，就不会显示，大家使用的时候仔细下就好；
再有就是推荐一款国人写的Tree插件： ZTree ，很好用，大家可以自己学习一下上面demo写的很全面；
不说废话了，直接上代码：
View Code
< head >
< link id ="easyuiTheme" href ="jquery-easyui-1.3.2/themes/default/easyui.css" rel ="stylesheet" />
< link href ="jquery-easyui-1.3.2/themes/icon.css" rel ="stylesheet" />
< script src ="jquery-easyui-1.3.2/jquery-1.8.0.min.js" ></ script >
< script src ="JavaScript.js" ></ script >
<!-- 这个是扩展Jquery的方法 -->
< script src ="jquery-easyui-1.3.2/jquery.easyui.min.js" ></ script >
< script src ="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" ></ script >
< script type ="text/javascript" >
$( function () {
var tree = $( " #tt2 " ).tree({
url: ' JsonTree.ashx '
});
});
</ script >
</ head >
< body >
<!-- 这种方式是直接html方式实现easyui的Tree框架,lines属性直接实现tree框架前面的虚线 -->
< ul id ="tt" class ="easyui-tree" lines ="true" >
< 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 id ="tt2" ></ ul >
</ body >
</ html >
这里只是写了下Tree框架的基本使用，具体Json格式数据的拼接我就不详细说了，其实无非就是一些节点的选择与添加：
id:节点id,这个很重要到加载远程服务器数据 text: 显示的节点文本 state: 节点状态, 'open' 或者 'closed', 默认是 'open'. 当设置为 'closed', 节点所有的子节点将从远程服务器站点加载 checked: 指明检查节点是否选中. attributes: 可以添加到节点的自定义属性 children: 一个节点数组,定义一些子节点html代码实现Tree框架的时候，我们可以看出，就是ul标签套ul标签，其实我个人认为其json格式数据也是这样的，慢慢分析一下，是可以搞懂的；
树json示例代码，其中我们也可以控制一些tree的属性，虚线，折叠，图标等等：
View Code
[{
"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#"
}]
}]
再有就是说一下以树为菜单时的异步加载代码：
var tree = $("#tt2" ).tree({
url: 'JsonTree.ashx'
});
直接这样，url指向一个ashx或者action发送请求就可以了，然后在点击展开tree的时候，根据父节点去数据库请求子节点，这样就可以了，请求的地址肯定是要判断请求的节点级别；
数据库字段设计：id、pid（节点级别）、text（显示名称）、url（指向地址）、seq（排序）
这样呢，基本上异步请求就可以解决了；
源码下载
easyui1.3帮助文档 （中文）不过我建议直接看官网的api
今天就这些了，睡觉去...
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息