首先在这分享一下ztree的api地址:http://www.baby666.cn/v3/api.php。如果本文中有些不明白的地方可以去查看api。
我先介绍要构建一个tree所需js文件:query-1.4.4.min.js、 query.ztree.core-3.1.js、 jquery.ztree.excheck-3.1.js这些文件可以去网上下载。
好,有了这些js脚本,那么我们就要开始代码了,首先我们先来一个简单的例子,形成一个简单的tree,看代码如下
var setting = { check: { enable: true }, data: { simpleData: { enable: true } } }; var zNodes =[ { id:'root', pId:0, name:"root"}, { id:'1', pId:'root', name:"1"}, { id:'11', pId:'1', name:'11'}, { id:'2', pId:'root', name:"2"}, { id:'22', pId:'2', name:"22"} ]; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); });
上面的形成的tree效果是这样的
现在让我们简单解释一下js代码,先来看这个行代码:$.fn.zTree.init($("#treeDemo"), setting, zNodes);这是句话就是初始化tree,其中需要三个参数,参数一$("#treeDemo"),这是指定要把形成的tree现在那个div里,参数二 setting,其作用是设置tree的一些属性,参数三zNodes,当然这是树所需要的节点,即是个json对象。
好了,我就先setting这个参数,剩下其他的大家一看就明白了。看代码
var setting = { check: { enable: true }, data: { simpleData: { enable: true } } };
其中的check:是设置是否要显示复选框。Data:是设置节点的数据模式,这里我们用的简单数据模式即[{id:’1’,pId:’0’,name:”1”},[{id:’2’,pId:’1’,name:”2”},…、],setting,还有很多属性设置,大家请参看api我就不一一介绍了。
好了简单的tree形成了。
标签: ztree, jquery ztree