今天是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

今天就这些了，睡觉去...

转载于:https://www.cnblogs.com/y20091212/archive/2013/04/14/3021168.html

JQueryEasyUI学习笔记（十四）tree相关推荐

吴恩达《机器学习》学习笔记十四——应用机器学习的建议实现一个机器学习模型的改进
吴恩达<机器学习>学习笔记十四--应用机器学习的建议实现一个机器学习模型的改进一.任务介绍二.代码实现 1.准备数据 2.代价函数 3.梯度计算 4.带有正则化的代价函数和梯度计算 5 ...
Polyworks脚本开发学习笔记(十四)-WORKSPACE信息读取及管理
Polyworks脚本开发学习笔记(十四)-WORKSPACE信息读取及管理 Polyworks的工作任务存储分为工作区和项目两级,通过WORKSPACE命令获取工作任务信息,实现更好的任务管理. 下 ...
【神经网络】学习笔记十四——Seq2Seq模型
本文简要介绍seq2seq,即序列到序列的基本知识,是深度学习和NLP中一个重要的知识. 从三部分来说,seq2seq基本简介,应用场景和原理解析. 一.什么是Seq2Seq 所谓Seq2Seq(Se ...
重新认识错过（通向财富自由之路学习笔记十四）
本周学习<通向财富自由之路>专栏重新认识错过的文章,在文章中作者介绍了自己是如何错过一次升级的.对于这种错过,非常有同感.比如在中学时候,需要学习生物.历史.地理等学科,而这些学科不需要计 ...
【theano-windows】学习笔记十四——堆叠去噪自编码器
前言前面已经学习了softmax,多层感知器,CNN,AE,dAE,接下来可以仿照多层感知器的方法去堆叠自编码器国际惯例,参考文献: Stacked Denoising Autoencoders ...
Mr.J-- jQuery学习笔记(十四)--动画显示隐藏
eq()函数定义和用法 :eq() 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 经常与其他元素/选择器一起使用,来选 ...
linux学习笔记十四：安装SAMBA（Server Message Block）
NFS:仅用于Linux之间 CIFS:仅用于Windows之间 SAMBA:可用于Linux与Windows之间,基于NetBIOS协议(用于LAN内部,不能跨路由),没有IP地址的概念,根据 Ne ...
好记性不如烂笔杆-android学习笔记十四 EditText 画行，解决光标压线问题
这个问题我在网上看来很多方法,有些看得似懂非懂的,后来自己采用一种比较投机的方法,居然可行,呵呵,拿出来跟大家分享一下. 其实就是把画的线向下偏移一定高度,当然针对不同分辨率,这个值也就不同: (因为 ...
步步为营 .NET 设计模式学习笔记十四、Decorator(装饰模式)
概述在软件系统中,有时候我们会使用继承来扩展对象的功能,但是由于继承为类型引入的静态特质,使得这种扩展方式缺乏灵活性:并且随着子类的增多(扩展功能的增多),各种子类的组合(扩展功能的组合)会导致更多 ...
CSS学习笔记(十四) 我们前端是怎么跟设计师沟通的
1.交付一般设计师给前端的只有psd,没有其它多余的东西,连基本的文档都懒得给.前端期望中的设计能给予的除了psd之外, 还有设计上游岗位传递下来的东西. 比如: 产品原型, 需求文档, 交互文档等 ...

JQueryEasyUI学习笔记（十四）tree

欢迎大家转载，转载请注明出处！

希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！

今天是easyui的Tree框架：

JQueryEasyUI学习笔记（十四）tree相关推荐

最新文章

热门文章