JQuery zTree core v3.5.23
http://zTree.me/
Date: 2016-04-01
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件
兼容 IE、FireFox、Chrome 等浏览器
在一个页面内可同时生成多个 Tree 实例
支持 JSON 数据
支持一次性静态生成 和 Ajax 异步加载 两种方式
支持多种事件响应及反馈
支持 Tree 的节点移动、编辑、删除
支持任意更换皮肤 / 个性化图标(依靠css)
支持极其灵活的 checkbox 或 radio 选择功能
简单的参数配置实现 灵活多变的功能
http://www.bootcdn.cn/zTree.v3/
http://www.ztree.me/v3/api.php API (API的说明太简陋)
http://www.ztree.me/v3/demo.php DEMO (主要还是要看DEMO里面的源码。)
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <link href="http://cdn.bootcss.com/zTree.v3/3.5.23/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/zTree.v3/3.5.23/js/jquery.ztree.all.js"></script> <script type="text/javascript"> var setting = { //显示复选框 check: { enable: true }, /* //显示单选框 check: { enable: true, chkStyle: "radio", radioType: "level" }, */ }; var zNodes =[ { name:"父节点1 - 展开", open:true, children: [ { name:"父节点11 - 折叠", children: [ { name:"叶子节点111"}, { name:"叶子节点112"}, { name:"叶子节点113"}, { name:"叶子节点114"} ]}, { name:"父节点12 - 折叠", children: [ { name:"叶子节点121"}, { name:"叶子节点122"}, { name:"叶子节点123"}, { name:"叶子节点124"} ]}, { name:"父节点13 - 没有子节点", isParent:true} ]}, { name:"父节点2 - 折叠", children: [ { name:"父节点21 - 展开展开展开展开", open:true, checked:true, children: [ { name:"叶子节点211"}, { name:"叶子节点212"}, { name:"叶子节点213"}, { name:"叶子节点214"} ]}, { name:"父节点22 - 折叠", children: [ { name:"叶子节点221"}, { name:"叶子节点222"}, { name:"叶子节点223"}, { name:"叶子节点224"} ]}, { name:"父节点23 - 折叠", children: [ { name:"叶子节点231"}, { name:"叶子节点232"}, { name:"叶子节点233"}, { name:"叶子节点234"} ]} ]}, { name:"父节点3 - 没有子节点", isParent:true} ]; $(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script> <ul id="treeDemo" class="ztree"></ul>
..