zTree使用随笔

　　最近开发过程中，需要写一个公司人员组织架构的树状图，后来选用了依赖jQuery的zTree插件来实现，主要是该插件功能齐全，性能稳定，个性化编辑方便，遂选用了这个插件。我记录了一下根据自身需求定制化修改的几项功能：

这是树状图最终的样子

　　

//这是HTML部分，即树状图的dom结构
<div class="leftBox">
        <ul id="tree" class="ztree"></ul>
</div>

//这是实现最基本功能的js代码结构
        var setting={
            view: {
                showLine: false,//是否显示连接线
                showIcon: false,//是否显示文字前面的标志
                showTitle:false,//鼠标hover时是否显示title
                dblClickExpand:false,//是否开启双击展开
                addDiyDom:addDiyDom,//改变选择行的样式
            },
            callback:{
                onClick:onClick,
                beforeExpand: beforeExpand,
                onExpand: onExpand
            },
            data:{

            },
            async: {
                enable: true,//开启异步
                url: "./package.json",
                type:"get",
                autoParam: ["tId"],//数据传递，tId是系统自动生成的当前树枝的id，此处也可以换成自己设置的属性，比如“ename”，那么传递的数据就是ename=one
                dataFilter:filter//对返回值进行操作
            }
        };

        var zNodes=[
            {name:"集团",open:false,isParent:true,"ename":"one"}
        ]

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

//由于结构比较复杂，组织架构大，此处我选择同级结构下只会单一路径展开，于是在js中加入以下代码，并且在setting中配置好对应事件

　　var curExpandNode = null;
　　function beforeExpand(treeId, treeNode) {
   　　 var pNode = curExpandNode ? curExpandNode.getParentNode():null;
   　　 var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null;
    　　var zTree = $.fn.zTree.getZTreeObj("tree");
    　　for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) {
    　　    if (treeNode !== treeNodeP.children[i]) {
    　　        zTree.expandNode(treeNodeP.children[i], false);
    　　    }
  　　  }
 　　   while (pNode) {
  　　      if (pNode === treeNode) {
  　　          break;
  　　      }
  　　      pNode = pNode.getParentNode();
 　　   }
  　　  if (!pNode) {
  　　      singlePath(treeNode);
  　　  }

　　}

function singlePath(newNode) {
    if (newNode === curExpandNode) return;

    var zTree = $.fn.zTree.getZTreeObj("tree"),
            rootNodes, tmpRoot, tmpTId, i, j, n;

    if (!curExpandNode) {
        tmpRoot = newNode;
        while (tmpRoot) {
            tmpTId = tmpRoot.tId;
            tmpRoot = tmpRoot.getParentNode();
        }
        rootNodes = zTree.getNodes();
        for (i=0, j=rootNodes.length; i<j; i++) {
            n = rootNodes[i];
            if (n.tId != tmpTId) {
                zTree.expandNode(n, false);
            }
        }
    } else if (curExpandNode && curExpandNode.open) {
        if (newNode.parentTId === curExpandNode.parentTId) {
            zTree.expandNode(curExpandNode, false);
        } else {
            var newParents = [];
            while (newNode) {
                newNode = newNode.getParentNode();
                if (newNode === curExpandNode) {
                    newParents = null;
                    break;
                } else if (newNode) {
                    newParents.push(newNode);
                }
            }
            if (newParents!=null) {
                var oldNode = curExpandNode;
                var oldParents = [];
                while (oldNode) {
                    oldNode = oldNode.getParentNode();
                    if (oldNode) {
                        oldParents.push(oldNode);
                    }
                }
                if (newParents.length>0) {
                    zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
                } else {
                    zTree.expandNode(oldParents[oldParents.length-1], false);
                }
            }
        }
    }
    curExpandNode = newNode;
}

function onExpand(event, treeId, treeNode) {
    curExpandNode = treeNode;
}

　　//由于我在上面关闭了双击展开这个事件，希望引入单击父节点即加载子节点
　　function onClick(e,treeId, treeNode) {

    　　var zTree = $.fn.zTree.getZTreeObj("tree");
    　　zTree.expandNode(treeNode, null, null, null, true);
    　　if(!treeNode.isParent){
　　　　　　//如果该节点不是父节点时的操作
   　　 }
　　}

　　//由于结构复杂，数据量较多，我希望使用异步加载的方式，点选父节点以后再加载子节点
　　//该函数是对返回的数据进行处理后加载到节点上的方法，由于我模拟的数据格式跟treeNode的格式一样，就没有再对其属性做设置

        function filter(treeId,parentNode,responseNode){
            if (!responseNode) return null;
            var childNodes=responseNode.result;
            for (var i=0, l=childNodes.length; i<l; i++) {
                console.log(childNodes[i].isParent);
            }
            return childNodes;
        }

　　//更改展开收缩时默认的“+”、“-”标识，改为箭头，这个直接通过CSS设置，很简单，我就不再赘述了。

　　//这里我们希望当前节点一整行都可以点选，并且选中后背景色加深，需要对树状结构做修改

　　function addDiyDom(treeId, treeNode) {

   　　 var spaceWidth = 10;
   　　 var switchObj = $("#" + treeNode.tId + "_switch"),
   　　         icoObj = $("#" + treeNode.tId + "_ico");
   　　 switchObj.remove();//展开收缩标识所在位置，让其加入到a标签内部，此处css中也要对该a标签宽度做修改，让其宽度等于整个选择栏的宽度
    　　icoObj.before(switchObj);

   　　 //增加边距
　　　　//此处通过往a标签最前位置增加透明元素来实现层级的缩进，层级越高，缩进的距离越大。同时也需要将原本的css中控制缩进的padding删除掉
   　　 var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level+15)+ "px'></span>";
   　　 switchObj.before(spaceStr);

　　}