jquery 插件ztree的应用------简单的树（tree）

首先在这分享一下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