zTree学习
来源:互联网 发布:根据网络安全法的规定 编辑:程序博客网 时间:2024/06/16 02:19
1.zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点,可以参考http://www.treejs.cn/v3/main.php#_zTreeInfo
2.使用zTree,首先要下载相应的js,jquery,css文件,“`
<link href="css/demo.css" rel="stylesheet" /> <link href="css/ztreestyle/ztreestyle.css" rel="stylesheet" /> <script src="js/jquery-1.4.4.min.js"></script> <script src="js/jquery.ztree.core-3.5.js"></script> <script src="js/jquery.ztree.all-3.5.js"></script> <script src="js/jquery.ztree.excheck-3.5.js"></script> <script src="js/jquery.ztree.exedit-3.5.js"></script>
3.初始化zTree
//初始化树 function InitTree() { var setting = { //check: { // enable: true //设置 zTree 的节点上是否显示 checkbox / radio 默认false //}, view: { fontCss: getFontCss, //个性化文字样式,只针对 zTree 在节点上显示的<A>对象 dblClickExpand: false,//双击节点时,是否自动展开父节点的标识 默认true showLine: false //设置ztree是否显示节点之间的连线 默认true }, data: { key: { title: "t" }, simpleData: { enable: true //是否使用简单数据模式 } }, callback: { onClick: onClick //用于捕获节点被点击的事件回调函数//如果设置了 setting.callback.beforeClick 方法,且返回 false,将无法触发 onClick 事件回调函数。 } }; //请求树状数据,初始化树//var zNodes = [ { id: 1, pId: 0, name: "父节点1 - 展开", open: true, iconOpen: "css/ztreestyle/img/diy/1_open.png", iconClose: "css/ztreestyle/img/diy/1_close.png" }, { id: 11, pId: 1, name: "父节点11 - 折叠",icon:"css/ztreestyle/img/diy/4.png"}, { id: 111, pId: 11, name: "叶子节点111" ,icon:"css/ztreestyle/img/diy/2.png" }, { id: 112, pId: 11, name: "叶子节点112" }, { id: 113, pId: 11, name: "叶子节点113" }, { id: 114, pId: 11, name: "叶子节点114" }, { id: 12, pId: 1, name: "父节点12 - 折叠" }, { id: 121, pId: 12, name: "叶子节点121" }, { id: 122, pId: 12, name: "叶子节点122" }, { id: 123, pId: 12, name: "叶子节点123" }, { id: 124, pId: 12, name: "叶子节点124" }, { id: 13, pId: 1, name: "父节点13 - 没有子节点", isParent: true, open: true }, { id: 2, pId: 0, name: "父节点2 - 折叠", iconOpen: "css/ztreestyle/img/diy/1_open.png", iconClose: "css/ztreestyle/img/diy/1_close.png" }, { id: 21, pId: 2, name: "父节点21 - 展开", open: true }, { id: 211, pId: 21, name: "叶子节点211" }, { id: 212, pId: 21, name: "叶子节点212" }, { id: 213, pId: 21, name: "叶子节点213" }, { id: 214, pId: 21, name: "叶子节点214" }, { id: 22, pId: 2, name: "父节点22 - 折叠" }, { id: 221, pId: 22, name: "叶子节点221" }, { id: 222, pId: 22, name: "叶子节点222" }, { id: 223, pId: 22, name: "叶子节点223" }, { id: 224, pId: 22, name: "叶子节点224" }, { id: 23, pId: 2, name: "父节点23 - 折叠" }, { id: 231, pId: 23, name: "叶子节点231" }, { id: 232, pId: 23, name: "叶子节点232" }, { id: 233, pId: 23, name: "叶子节点233" }, { id: 234, pId: 23, name: "叶子节点234" }, { id: 3, pId: 0, name: "父节点3 - 没有子节点", isParent: true, iconOpen: "css/ztreestyle/img/diy/1_open.png", iconClose: "css/ztreestyle/img/diy/1_close.png" } ]; //$(document).ready(function () { //$.fn.zTree.init($("#treeDemo"), setting, zNodes); //});//返回的数据格式 $.ajax({ type: 'Get', url: '?rootid=0', dataType: "json", //可以是text,如果用text,返回的结果为字符串;如果需要json格式的,可是设置为json success: function (data) { $.fn.zTree.init($("#leftTree"), setting, data); }, error: function (msg) { alert(" 数据加载失败!" + msg); } }); }
0 0
- zTree学习
- zTree学习
- ZTree学习(三),ztree树扩展
- JQuery-zTree学习笔记
- ztree的学习
- ztree学习与使用
- zTree学习详解
- zTree学习笔记
- zTree学习记录
- zTree学习笔记(一)
- ztree学习使用之一
- ztree学习小计
- zTree--jQuery学习
- Jquery-zTree学习笔记
- ztree学习001
- Jquery学习应用之 zTree
- jquery学习笔记--ztree插件
- zTree--jQuery快速学习笔记
- 上传图片、文件
- java service
- nGrinder 的 Groovy 脚本使用指南(HTTP 请求详解)
- java 实现简单的邮件发送
- git add *的时候遇到warning: LF will be replaced by CRLF in folder/ 举报本内容
- zTree学习
- linux 命令总结
- boosting算法
- Java HashMap 遍历并删除匹配项
- UNIX IPC
- 动态合并单元格
- 一篇文章看懂NB-IOT
- 一篇小程序的放水的文章
- tomcat+nginx+redis实现均衡负载、session共享(一)