ztree的简单使用

zTree简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件（MIT 许可证）。

使用zTree

其实zTree的API已经说得足够明白了，自己再记录一遍加深一下印象。

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

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

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

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

1）直接把json数据传给组件。

$(document).ready(function(){    $.fn.zTree.init($("#treeDemo"), setting, zNodes);});

2）异步获取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);}

发起请求得到的数据包含一个jsonArray和一些其他字段，通过dataFilter先将数据处理一下，得到这个需要的json数据再做处理。
在业务中可能会遇到要将所有节点打开的需求，这里有两种实现的方法，一种是在返回数据的时候，给父节点添加“open:true”字段；另一种方式是根据树的ID，打开它的所有节点，这里又分为静态和异步两种情况：

• 静态获取节点数据
  根据树的ID直接打开所有子节点。
• 异步获取节点数据
  利用回调函数，在树加载完成的时候调用方法，根据树的ID打开它的所有节点。

另附zTreeAPI文档地址：[http://www.treejs.cn/v3/api.php ]相当详细，点赞