jquery插件--zTre(应用篇）

 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。目前的版本是v3.x. 学习zTree有一个很好的网站http://www.treejs.cn/v3/main.php#_zTreeInfo（百度上直接输入zTree就能获取）本文介绍自己在工作中几点体会。

主要涉及到：配置信息，数据组织格式，自定义图标，排序，拖动，展开层基数，关键字搜索等功能。

1.配置信息：

var setting_p = {
    check: {
        enable: true //表示是否显示组织图前面的复选框。
    },
    data: {
        simpleData: {
            enable: true//以简洁的数据进行数据组织，而不是以层层嵌套的数组形式显示数据。
        }
    },
    view: {
        nameIsHTML: true
    },
    callback: {
        beforeDrag: zTreeBeforeDrag,／／鼠标拖动事件，开始移动节点，对应的回掉函数
        //onDrag: zTreeOnDrag,
        beforeDrop: zTreeBeforeDrop,／／鼠标拖动事件，开始释放节点，对应的回掉函数

        //onDrop: zTreeOnDrop
        onMouseDown: zTreeOnMouseDown
    },
    edit: {//不懂的全写上
        enable: true,
        showRemoveBtn: false,
        showRenameBtn: false,
        drag: {//允许拖动的位置，可以拖到一个目标的内部，下面，自己做的时候全写上就好了。
            isCopy: true,
            isMove: true,
            prev: true,
            next: true,
            inner: true
        }
    }
};

相关的jade代码：

     #layout_container(style="overflow:auto;")
        #people_tree.zTreeDemoBackground
             ul#treeDemo.ztree

对应的初始化代码：

    $.get(url, function(data) {
        var sort_data = _.sortBy(data, 'type');
        $.fn.zTree.init($("#treeDemo"), setting_p, sort_data);
        treeObj = $.fn.zTree.getZTreeObj("treeDemo");

    })//请求数据，在后端进行组装，组装完毕，利用zTree插件进行渲染。

2.数据组织格式。第一步说过，一般用simpleData。下面有两种数据格式，第一种，是从官网上找的，第二种也是从官网上找的，但是是用的比较多的。此时要把 simpleData 的enable  设置为true.

var sort_data= [
	{name: "父节点1", children: [
		{name: "子节点1"},
		{name: "子节点2"}
	]}
];//该数据就对应上面1中的sort_data。如果数据嵌套层级过深，相信没人会这样用的

第二种简洁用法

var zNodes =[
{ id:1, pId:0, name:"普通的父节点", isParent:true},
{ id:11, pId:1, name:"叶子节点 - 1",},
{ id:12, pId:1, name:"叶子节点 - 2", },
{ id:13, pId:1, name:"叶子节点 - 3", t:"我很普通，随便点我吧"},
{ id:2, pId:0, name:"NB的父节点",  open:true},
{ id:21, pId:2, name:"叶子节点2 - 1",drop:false},
{ id:22, pId:2, name:"叶子节点2 - 2"},
{ id:23, pId:2, name:"叶子节点2 - 3"},
{ id:3, pId:0, name:"郁闷的父节点"},
{ id:31, pId:3, name:"叶子节点3 - 1"},
{ id:32, pId:3, name:"叶子节点3 - 2"},
{ id:33, pId:3, name:"叶子节点3 - 3"}
];

这种格式用的比较多，其中id, 是用来排序用的，pId是用来找父节点的，通过pId就可以建立各级链接。name就是每个节点所要展示的名字。isParent:true为true表示，该节点是文件夹级别的。下面还可以挂载其他节点。open为true，表示该节点默认是打开状态。drop：false表示不能将其他节点拖拽到该节点上来。

3.ztree中，当把 ztree放在一个弹出框中，如果下次弹出弹出框，可能会保留上次勾选记录，此时如果要不显示上次的勾选记录，那么

      

  treeObj.checkAllNodes(false);

其中treeObj=  $.fn.zTree.init($("#treePeople"), ztree_setting, people_data);

//#treePeople, 是根部节点，ztree_setting 是配置信息，people_data  是2中的数据

4.获取勾选的node节点

        var nodes = treeObj.getCheckedNodes(true);

未完待续。