zTree使用随笔

Posted Miracle--

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);

  }
 
 

 

以上是关于zTree使用随笔的主要内容,如果未能解决你的问题,请参考以下文章

js树形控件—zTree使用总结(转载)

zTree使用总结

ztree使用系列四(ztree实现同级拖拽排序并将排序结果保存数据库)

ztree java 前后台代码(input与ztree结合)

JAVAEE——BOS物流项目02:学习计划动态添加选项卡ztree项目底层代码构建

zTree入门使用