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函数就是用来改变节点状态的。

解决办法

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

// 初始化为项目经理id
var 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开发，在调试上非常耗时间，可能是浏览器的问题，界面上修改完之后，重新加载有时不生效。
好了，就酱！