学斋随笔，初九潜龙勿用，-38

zTree 是一个依靠 jQuery 实现的多功能 “树插件”， 而且拥有较好的浏览器兼容性，有着丰富的功能以及可以自定义样式，足以满足大部分业务的开发。

返回数据的时候，给父节点添加“open:true”字段；将所有节点打开

　　引入资源

　　向页面中引入jQuery的js文件，zTree的js文件和CSS文件。

　　页面添加zTree的容器，class属性为ztree

　　<ul id="treeDemo" class="ztree"></ul>

　　引入数据

　　zTree可以解析json格式的数据，有两种方式可以把数据传给zTree组件来生成树状结构：

　　直接把json数据传给组件。

　　　　$(document).ready(function(){

　　　　　　 $.fn.zTree.init($("#treeDemo"), setting, zNodes);

扫描二维码关注公众号，回复： 4802288 查看本文章

　　　　 });

　　异步获取json格式数据，第三个参数传null或者空着。

　　$(document).ready(function(){

　　　　　　 $.fn.zTree.init($("#treeDemo"), setting, null);

　　　　});

　　使用demo

　var setting = {
    data: {
        key : {
            title : "c01name", //鼠标悬停显示的信息
            name : "c01name" //网页上显示出节点的名称
        },
        simpleData: {
            enable: true,
            idKey: "c01id", //修改默认的ID为自己的ID
            pIdKey: "c01parentid",//修改默认父级ID为自己数据的父级ID
            rootPId: 000     //根节点的ID
        }
    }
};

有时候异步处理得到的数据并不是一个单纯的jsonarray数据，对他进行一个提取操作：

var setting = {
    async: {
        enable: true,//采用异步加载
        dataFilter: ajaxDataFilter,    //预处理数据
        url : "http://127.0.0.1/WeChat/admin/C01Action_listC01.action",
        dataType : "json"
    },
    data : {
        key : {
            title : "c01name",    
            name : "c01name"
        },
        simpleData : {
            enable : true,
            idKey : "c01id",
            pIdKey : "c01parentid",
            rootPid : 000
        }
    },
    callback : {
        beforeClick: zTreeBeforeClick,
        onClick : zTreeOnClick,
        onAsyncSuccess: zTreeOnAsyncSuccess //异步加载完成调用
    }
};
/* 获取返回的数据，进行预操作 */
function ajaxDataFilter(treeId, parentNode, responseData) {
    responseData = responseData.jsonArray;
    return responseData;
};
//异步加载完成时运行，此方法将所有的节点打开
function zTreeOnAsyncSuccess(event, treeId, msg) {
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    treeObj.expandAll(true);
}