zTree学习笔记(一)

最近项目上用到了很多树，随便在网上找了一个，看了看Demo效果，还不错，无论从配置、性能、功能上都比较优异，就选择了依赖JQuery的zTree插件，无论是初始树还是节点的选择和赋值都比较容易上手使用，但是在使用过程中，遇到了一点问题，最终还是解决了，所以抽时间记录下来，接下来，我会分需求描述、难点部分、解决办法以及心得体会这几面来叙述。

需求描述

针对系统中有一块是项目组的添加和组成员配置，需要一个树结构加载所有成员（数据量不是很大），想着能够实现，选择项目经理时，能够在前端实现从树结构中将该成员置为选中状态并不可编辑（防止不选择该成员），当改变项目经理时，能够从书中将该成员的状态置为未选中，并且将状态置为可编辑，并且最终在提交表单时能够将树中选中状态的节点id传到后台。

难点部分

树结构的初始化以及节点的选择这些按照API都能够很简单的实现，这里就不再说明了，详情去看zTree 中文API，Demo 演示，难点是在下拉框中选择一个成员时，主动触发将该成员在树中的选中状态与编辑状态的来回转换。

项目经理下拉框：

<div class="control-group">    <label class="control-label">项目经理：</label>    <div class="controls">        <form:select path="pmId" class="input-xlarge" onchange="changeNode(this[selectedIndex].value);">            <form:option value="-" label="--请选择--" />            <form:options items="${userList}" itemLabel="name" itemValue="id" htmlEscape="false"/>        </form:select>        <span class="help-inline"><font color="red">*</font> </span>    </div></div>

树结构：

<div class="control-group">    <label class="control-label">添加组成员:</label>    <div class="controls">        <div id="userTree" class="ztree" style="margin-top:3px;float:left;"></div>        <form:hidden path="userIds"/>    </div></div>

重点是onchange=”changeNode(this[selectedIndex].value);”

该js函数就是用来改变节点状态的。

解决办法

定义一个全局变量，一个全局数组

// 初始化为项目经理idvar globlNode  = "${project.pmId}";// 全局集合var gids = [];

// 获取树对象var zTree = $.fn.zTree.getZTreeObj("userTree");// 根据id获取选中节点var node = zTree.getNodeByParam("id", id);// 修改node选中状态if(status){ // status为节点的状态：true-选中, false-未选中    // 将节点置为选中状态    // 也可以使用node.checked = true;    try{zTree.checkNode(node, status, false);}catch(e){}    // 并将该节点的id放入数组中，因为使用getSelectedNodes方法无法获取不可编辑状态的节点id    gids.push(id);}else{  // 取消选中状态    node.checked = status;    // 从数组中删除节点，js数组只能依靠下标删除，下面会把相应方法贴出    gids.remove(id);}// 将该节点显示/隐藏if(showOrhide){                 //zTree.showNode(node);  -- 显示节点    node.chkDisabled = false;   -- 置为不可编辑状态(为了用户体验，这里使用不可编辑)            }else{    //zTree.hideNode(node);  -- 隐藏节点    node.chkDisabled = true;}// 再调用updateNode(node)的方法更新属性zTree.updateNode(node);// 再调用reAsyncChildNodes方法便可刷新出子节点zTree.reAsyncChildNodes(node, "refresh");

使用到的从js数组中遍历得到相应值的索引，并将该值删除方法如下：

// 遍历获取索引Array.prototype.indexOf = function(val) {                  for (var i = 0; i < this.length; i++) {          if (this[i] == val) return i;      }      return -1;  }// 从字符数组中删除相应值Array.prototype.remove = function(val) {      var index = this.indexOf(val);      if (index > -1) {          this.splice(index, 1);      }  }

心得体会

在学习使用的过程中遇到很多问题：
首先是对js的不熟悉，因为我在下拉框中有个空value的默认选项，并且新增项目组时该选项是空的，要考虑到新增和修改的情况，所以js对于nodeid的判断上浪费了点时间，这里再分享一点关于js中对于空值的判断：

/** * 判断是否null * @param data */function isNull(data){     return (data == "" || data == undefined || data == null) ? "null" : data; }

要考虑到三种情况，为null、空串、未定义。并且在js中，!= 和！==也有一定说法，这里就不赘述了。
第二就是使用的JSP开发，在调试上非常耗时间，可能是浏览器的问题，界面上修改完之后，重新加载有时不生效。
好了，就酱！