zTree的使用
Posted 大圣
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了zTree的使用相关的知识，希望对你有一定的参考价值。
zTree可以实现树形结构的关系。一般会出现在部门 的上下级关系，角色权限的分配等模块中...
zTree格式要求：即Json的复杂格式
[{id:"..",pId:"..",name:"..",checked:"true/false"}]
id：标识当前的id；
pId：父节点的id；
name：节点名称（就是在页面上可以看到的值）；
checked：是否勾选，默认是false。
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <link rel="stylesheet" href="${ctx}/staticfile/components/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"> 4 <script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery-1.4.4.min.js"></script> 5 <script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.core-3.5.min.js"></script> 6 <script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.excheck-3.5.min.js"></script> 7 <SCRIPT type="text/javascript"> 8 9 10 var setting = { 11 check: { 12 enable: true 13 }, 14 data: { 15 simpleData: { 16 enable: true 17 } 18 } 19 }; 20 //测试数据 21 var zNodes =[{id:1,pId:1,name:"爷爷"},{id:2,pId:1,name:"爸爸"}，{id:3,pId:2,name:"儿子"}];22 23 $(document).ready(function(){ 24 $.fn.zTree.init($("#htZtree"), setting, zNodes); 25 26 var zTreeObj = $.fn.zTree.getZTreeObj("Ztree"); 27 zTreeObj.expandAll(true); //展开所有树节点 28 }); 29 30 31 32 </SCRIPT> 33 34 </head> 35 36 <body> 37 <h1>Ztree入门教例</h1> 38 <div style="padding:30px;"> 39 <ul id="Ztree" class="ztree"></ul> 40 </div> 41 42 </div> 43 44 45 </form> 46 </body> 47 </html>
以上是关于zTree的使用的主要内容，如果未能解决你的问题，请参考以下文章
ztree使用系列四（ztree实现同级拖拽排序并将排序结果保存数据库）