树形控件zTree使用小结

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

官方提供了很好的API文档和Demo 可以从如下地址下载：http://www.ztree.me/hunter/zTree.html

这段时间公司项目刚好用到了ztree，抽个时间总结一下。

准备工作

1、zTree v3.x 有 3 个 js 文件，一个 核心包 ( jquery.ztree.core-3.x.js )，两个扩展包 -- 复选框功能包 ( jquery.ztree.excheck-3.x.js ) & 编辑功能包 ( jquery.ztree.exedit-3.x.js ),根据自己的需要进行引入

     2、引入zTreeStyle.css 文件，为了尽量避免样式冲突，将 zTree 容器的 className 设置为 'ztree'

      3、引入样式图片

页面布局

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

id 在树的容器加载的时候会用到，class样式引入时需要用到，所以这两个千万不能少

JS部分

一、生成树 

   首先说明一下，ztree可以接受两种数据格式：标准数据格式 和  简单数据格式

//标准的 JSON 数据需要嵌套表示节点的父子包含关系var nodes = [{name: "父节点1", children: [{name: "子节点1"},{name: "子节点2"}]}];

//简单模式的 JSON 数据需要使用 id / pId 表示节点的父子包含关系,若为简单模式，需要设置参数配置中 simpleData中enable为truevar nodes = [{id:1, pId:0, name: "父节点1"},{id:11, pId:1, name: "子节点1"},{id:12, pId:1, name: "子节点2"}];

初始化树

<script>    var zTreeObj;  var setting = {}; // zTree 的参数配置，后面详解  var zNodes = [  // zTree 的数据，此处使用标准json格式  {  name: "test1", open: true, children: [  { name: "test1_1" }, { name: "test1_2" }] }, {  name: "test2", open: true, children: [  { name: "test2_1" }, { name: "test2_2" }] } ];   //初始化zTree，三个参数一次分别是容器、参数配置、数据源 $(document).ready(function () {        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);}) //若用ajax请求数据源，该语句写在ajax返回success中执行即可;

以上初始化方法是将所有节点一次性加载出，也可以用异步加载的方式，即点击父节点的时候加载出子节点

var initRoot = [{"id": "0", "isParent": true, "name": "根节点"}];//设置根节点var setting = { // 其他参数配置，后面详解    async: {        enable: true,//采用异步加载        url : url,autoParam: ["id", "name"] //将需要作为参数提交的属性名称    }};zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,initRoot);//若根节点也用异步加载出，最后一个参数设置为 null 即可

二、ztree的配置
zTree的配置采用Json格式，按照配置的类型分为view（可视界面相关配置）、data（数据相关配置）、check（复选框相关配置）、callback（各类事件的回调函数配置）、async（zTree异步加载配置），以下是我们经常会使用到的一些配置及说明，其他详细配置可以参考zTree官方API文档的详细介绍。

var setting = {  view: {  selectedMulti: true, //设置是否能够同时选中多个节点  showIcon: true,//设置是否显示节点图标  showLine: true, //设置是否显示节点与节点之间的连线 showTitle: true, //设置是否显示节点的title提示信息  },  data: {   simpleData: {   enable: false, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）   idKey: "id", //设置启用简单数据格式时id对应的属性名称    pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构  }  },  check:{  enable: true  //设置是否显示checkbox复选框  },  callback: {  onClick: onClick,  //定义节点单击事件回调函数  onRightClick: OnRightClick, //定义节点右键单击事件回调函数  beforeRename: beforeRename, //定义节点重新编辑成功前回调函数，一般用于节点编辑时判断输入的节点名称是否合法  onDblClick: onDblClick, //定义节点双击事件回调函数  onCheck: onCheck  //定义节点复选框选中或取消选中事件的回调函数  },  async: {  enable: true,   //设置启用异步加载  type: "get",   //异步加载类型:post和get  contentType: "application/json", //定义ajax提交参数的参数类型，一般为json格式  url: "/Design/Get",  //定义数据请求路径  autoParam: ["id=id", "name=name"] //定义提交时参数的名称，=号前面标识节点属性，后面标识提交时json数据中参数的名称  } };

三、常用操作

1、点击操作及获取该节点相关信息

var setting ={ //配置中定义点单击事件回调函数        callback: {            onClick: zTreeOnClick        },}function zTreeOnClick(event, treeId, treeNode) {// event 标准的js event对象；treeId 对应ztree的treeid ;treeNode 被点击的节点 JSON 数据对象alert(treeNode.id + ", " + treeNode.name);//判断该节点是否为叶节点 if (treeNode.isParent){          alert("该节点不为叶节点")}//获取该节点的父节点var parentNode = treeNode.getParentNode();//获取同级兄弟节点    var brotherNodes = parentNode.children;    }

2、模糊搜索树节点，并高亮显示结果

var setting = {view: {fontCss: setHighlight // 一定要设置样式，setHighlight是自定义方法}};var zTree = $.fn.zTree.getZTreeObj("tree");//模糊搜索满足条件的节点，该示例为name值模糊搜索function searchNode(value) {    if (value == ""){return;}    //获取所有节点    var allNodes = zTree.transformToArray(zTree.getNodes());    //关闭原有搜索结果样式    for (var i = 0; i < allNodes.length; i ++) {        allNodes[i].highlight = false;//取消高亮样式        zTree.updateNode(allNodes[i]);//更新树节点上的样式    }    // 先关闭所有节点    zTree.expandAll(false);    // 展开根节点（如果不展开根节点，下面的节点无法展开）    zTree.expandNode(zTree.getNodes()[0],true);    // 获取与value匹配的节点    var nodes = zTree.getNodesByParamFuzzy("name", value);    //展开搜索到的节点    for (var i = 0; i < nodes.length; i ++) {            nodes[i].highlight=true;//添加样式            zTree.updateNode(nodes[i]);//更新树节点上的样式            zTree.expandNode(nodes[i].getParentNode(),true);//展开节点        }}// 设置高亮字体function setHighlight(treeId, treeNode) {          return (treeNode.highlight) ? {color:"green", "font-weight":"bold", "background-color": "#ddd"} : {color:"#000", "font-weight":"normal"};   }

需要注意的是，若用异步加载方式加载节点，未加载过的节点搜索不出来。