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