JQueryEasyUI学习笔记(十四)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,
&nb
补充:web前端 , JavaScript ,