关于zTree的使用心得以及相关的JS技术总结

首先关于zTree树的生成将它分成了两部分，一部分为公共的JS初始化部分，另一部分为具体的JSP页面，在JSP页面中放入具体的业务参数。

    当然要先对zTree的官方API有一定的了解  http://www.ztree.me/v3/api.php 

一、介绍JSP页面。

    关于引用zTree官方提供的JS文件就不说了。这里我在JSP页面上通过后台传递过来一些特定的参数。 

<%@ page language="java" contentType="text/html; charset=UTF-8" 
 pageEncoding="UTF-8"%> 
 
 
 
 
<%@include file="/WEB-INF/views/commons/common.jsp"%> 
<%@include file="/WEB-INF/views/commons/ztree.jsp"%> 
<%@include file="/WEB-INF/views/themes/bootstrap_theme.jsp"%> 
 
 
 
 
 
 
 
 
 
 
 
 
  
 //这里是树的生成位置 
 
 
  
 
 
  
 //这里是选择好的候选人的生成位置 
 
 
   
 

这个页面的  initPersonTree（）会调用写的公共JS执行人员初始化的方法，下面看JS代码

(function(window, $){
 var OsmApp= {};
 var returnData = new Array();
 var defalutConfig = {
 multi:false,//单选多选
 currentPath:BASE_PATH + "/submit/decisionsupport",
 personnelPath:"域名"+"/mocha.component.personnel/users",
 orgUrl:"0",
 selectType:"checkbox"
 };
 var config = {};
 OsmApp.Tree={
 selectOsm:function(exdconfig){
 config = {};
// $("#treeSelected").empty();
// $("#readTreeSelected").empty();
 $.extend(true, config, defalutConfig, exdconfig);//关于这个方法可以自己百度，主要是用来合并，重复的数据以后面的参数为准
 initRootNodes("osmtree","treeSelected");
// initRootNodes("osmreadtree","readTreeSelected");
 },
 removeLi:function(id,treeId){
 if(null!=returnData&&returnData.length>0){
 var i=0;
 for(i=0;i" + treeNode.name + "";
 returnData.push(treeNode);
 $("#"+selectTreeId).append(str);
 var zTree = $.fn.zTree.getZTreeObj(treeId);
 zTree.checkNode(treeNode, true, true);
 }
 
 }
 function getRoots(treeObj) {
     //返回根节点集合
    return treeObj.getNodesByFilter(function (node) { return node.level == 0; });
 }
 
 window.OsmApp = OsmApp;
 
})(window, jQuery);

这里的JS主要提供了

1、初始化树的方法，其中分为根节点的初始化和普通节点的加载（因为采用的是异步加载方式），

2、添加人员到候选人处，删除候选人

    1）：根节点的初始化，

       

        这里对调用方法返回的参数做了重新包装，将它组装成树节点需要形式的json对象

        通过传递指定的组织ID获取该组织的子子组织信息和属于该组织的人员信息（如果有的话） 

        通过方法返回的参数的格式： 

  

这种数据格式和普通json对象不同的是在外面包了一个方法名和前后的小括号，所以我需要先截取括号内的json字符串，再根据“orgs”和“users”分别获取组织的节点数据和人员的节点数据。

这里要注意json字符串或json数组和json对象的转换：

      json字符串或数组转成json对象的方法  JSON.parse（json）、 eval("("+jsons+")") 两种方法; 反过来可以用JSON.stringify（json）转成json字符串；确定该接送属于什么类型可以用alert(typeof(json))。

对于获取到的组织数据和人员数据要有相应的操作，比如组织的数据要添加一个isParent=true的属性保证它是父节点，尤其是异步加载的时候这是要满足的条件之一，还可以添加nocheck=true属性去掉组织    节点前的选择框，如上上图片效果。

其中组织节点和人员节点的数据的具体字段不一样，这里在拼接的时候要确保都有id和那么用来确定节点的ID和节点的名称， 

       for(var key in treeUNodes){

      treeUNodes[key]["id"]=treeUNodes[key]["uid"]; 
      treeUNodes[key]["name"]=treeUNodes[key]["cn"]; 

      }

    这个方法就是可以给人员节点数据添加id和那么属性 属性的值从人员节点中获取 

2）：其他节点的异步加载的生成树

首先设置好异步加载的参数，可以参考官方API文档。 

异步加载传参数和获取数据的处理与根节点初始化是基本一致。

3）：回调函数

这里用到最多的就是单机前和单机时调用的方法；选择框前和选择框时调用的方法；双击前和双击是调用的方法。 

单机：单机只要是指点击节点名字，不包括单机选择框

    单机前可以设置一些过滤条件决定该节点单机时触不触发，可以参考api文档或者我写好的beforeClick和onCLick方法。 

选择框（check）：选择框分radio和checkbox两种

    通过选择框时来触发beforeCheck和onCheck方法 

双击与单机类似。

4）生成候选人

关于候选人的生成有两点一个是判断该人是否已经选过，还有就是判断是多选还是单选，

添加候选人分别在两个地方，一个是单机节点时还有一个是点击选择框时，也就是分别在onCLick和onCheck方法值执行添加候选人的操作。

    

function addLi(treeNode,treeId,selectTreeId){ 
         var isSelected = false; 
         $("#"+selectTreeId).find("li").each(function(index,domEle){ 
             var  eId = $(domEle).attr("id"); 
             if(eId == treeId+treeNode.id){ 
                 isSelected = true; 
             } 
         }); 

        //判断这个人有没有选择过 
         if(!isSelected){ 
             var str = "

" + treeNode.name + "

"; 
             returnData.push(treeNode);//将选中的节点（人员）添加到returnData中，returnData是在JS中建立的数组，用来存储节点信息 
            $("#"+selectTreeId).append(str);//生成HTML 
             var zTree = $.fn.zTree.getZTreeObj(treeId); 
            zTree.checkNode(treeNode, true, true); 
         } 

    }

如果只能选择一个候选人的话，添加新的人员之前清空returnData数组：

//如果是限选一人的情况 

if(!config.multi){ 
 returnData = new Array(); 
 $("#"+_selectTreeId).empty();//_selectTreeId这个就是生成候选人的DIV的ID 
 } 

删除候选人：

removeLi:function(id,treeId){ 
 if(null!=returnData&&returnData.length>0){ 
 var i=0; 
 for(i=0;i