记一次jQuery插件Ztree的使用

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。常常应用于PC端。

具体实现过程如下。

1.先下载ztree的js库（搜ztree即可）
2.引用下载的js库
例如：

3.写一个显示树的ul 引用ztree的样式 --> class=“ztree”

4.树加载配置
function loadOrgTree() {
isTreeLoaded = false;
//配置ztree的setting
var setting =
{
//若生产的组织树需要在前面加复选框/单选框 加上这个check属性配置
check:
{
enable: true, //true / false 分别表示 显示 / 不显示 复选框或单选框
autoCheckTrigger: true, //true / false 分别表示 触发 / 不触发 事件回调函数
chkStyle: “checkbox” , //勾选框类型(checkbox 或 radio）
chkboxType: mychkboxType //勾选 checkbox 对于父子节点的关联关系
},
data :
{
key :
{
name : “orgName”,
title : “orgName”
},
simpleData :
{
enable : true,
idKey : “orgId”,
pIdKey : “orgSupId”,
rootPId : -1
}

        },
        //异步从后端请求数据
        async : 
        {
            enable : true,//开启异步机制
            url : "${ctx}/gxdxoa/addressbook/AddressBook/tree.ht",//请求数据的url
            contentType : "application/x-www-form-urlencoded",//数据文件返回类型
            dataType : "json",//数据返回类型：json字符串的方式
            type : "post",//请求方式
            autoParam : ["orgId"],   //这个表示树节点异步加载的时候传到后台的节点id的key是多少，比如我写成orgid，那在后台就是request.getParameter("orgid")
            otherParam : {     //其他参数 ;直接用 JSON 格式制作键值对，例如：{ key1:value1, key2:value2 }
                path : myPath,
                orgId:$('#orgId').val()
                //,systemId : "${systemId}"
                //,demId : 1
            },
            dataFilter : orgTreeFilter //数据过滤
        },
        view : {
            showLine : false
        },
        callback : {  //回调函数; 根据需求选择合适的监听事件
            onCheck : orgTreeClickHandler,
            beforeAsync : function() {
                return !isTreeLoaded;
            },
            onAsyncSuccess : function(event, treeId, parentNode, msg){  //异步加载正常结束的事件回调函数
                isTreeLoaded = true;
                if (parentNode == null){
                    orgTree.expandNode(orgTree.getNodes()[0], true, false ,false, true);
                }

                var targetNode = orgTree.getNodeByParam("orgId", parseInt(curOrgId), null);
                if (targetNode) {
                    orgTree.selectNode(targetNode, false, false);
                    setTimeout(function() {
                        $('#' + targetNode.tId).focus();
                    }, 1000);
                }
            }
        }
    };
	//树初始化
    orgTree = $.fn.zTree.init($("#orgTree"), setting);
}

剩下一点东西我也还在摸索！