最近开发过程中,需要写一个公司人员组织架构的树状图,后来选用了依赖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使用随笔的更多相关文章

  1. springMVC补充——springMVC的表单标签

    同其他标签一样,使用标签的第一步是进行标签库的导入(如果页面频繁导入比较多的标签库,应当专门建立导入标签库的页面,详见ztree的随笔) 导入标签库: <%@ taglib prefix=&qu ...

  2. JQuery树插件——ztree

    API与Demo:http://www.treejs.cn/v3/api.php 使用插件,第一步依然是引入: <link rel="stylesheet" href=&qu ...

  3. vue 使用ztree

    1 全局引入jquery , 不明白的看我上一个的随笔 , 特别简单 2 我没有封装组件 , 项目里面这个效果的只用了一次 , 没有必要 在你的<script>标签下面引入这俩东西 , 前 ...

  4. AI人工智能系列随笔

    初探 AI人工智能系列随笔:syntaxnet 初探(1)

  5. 【置顶】CoreCLR系列随笔

    CoreCLR配置系列 在Windows上编译和调试CoreCLR GC探索系列 C++随笔:.NET CoreCLR之GC探索(1) C++随笔:.NET CoreCLR之GC探索(2) C++随笔 ...

  6. C++随笔:.NET CoreCLR之GC探索(4)

    今天继续来 带大家讲解CoreCLR之GC,首先我们继续看这个GCSample,这篇文章是上一篇文章的继续,如果有不清楚的,还请翻到我写的上一篇随笔.下面我们继续: // Initialize fre ...

  7. C++随笔:从Hello World 探秘CoreCLR的内部(1)

    紧接着上次的问题,上次的问题其实很简单,就是HelloWorld.exe运行失败,而本文的目的,就是成功调试HelloWorld这个控制台应用程序. 通过我的寻找,其实是一个名为TryRun的文件出了 ...

  8. ztreeDeptSelect 基于jquery和ztree的部门选择插件

    插件介绍 首先我们来看插件的功能演示(效果): 插件准备好后.前台只需编写html: <input type="text" class="deptName" ...

  9. ASP.NET MVC 系列随笔汇总[未完待续……]

    ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...

随机推荐

  1. hibernate学习 六 Hibernate缓存

    缓存: 如果在集群环境下使用Hibernate时,(集群有节点A ,节点B) 当请求,发往A节点,A在数据库中修改了一条记录,然后节点B的缓存中如何实时的更新节点A修改的新数据          hi ...

  2. 排名Top 16的Java实用类库

    (转载: http://www.hollischuang.com/archives/1606) github地址: https://github.com/liufeiSAP/javaStudy.git ...

  3. python3 + selenium + eclipse 中报错:'geckodriver' executable needs to be in PATH

    Windows系统解决办法如下: 1.下载geckodriver.exe: 下载地址:https://github.com/mozilla/geckodriver/releases 请根据系统版本选择 ...

  4. SpringBoot之导入导出Excel

    1.添加springBoot支持 <dependency> <groupId>org.apache.poi</groupId> <artifactId> ...

  5. 数据字典生成工具(生成Excel, Word,PDF,html)

    转自:http://www.cnblogs.com/yanweidie/p/3838765.html 数据字典生成工具之旅系列文章导航 数据字典生成工具之旅系列文章导航 宣传语 数据字典生成工具.数据 ...

  6. HERO3+ Black Edition 视角 (FOV) 信息

    HERO3+ Black Edition 视角 (FOV) 信息 问题  HERO3+ Black Edition 视角 (FOV) 信息是什么? 它在哪适用? HERO3+ Black 作答 所有视 ...

  7. POJ - 1458 Common Subsequence DP最长公共子序列(LCS)

    Common Subsequence A subsequence of a given sequence is the given sequence with some elements (possi ...

  8. Android 自定义ViewGroup 实战篇 -> 实现FlowLayout

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38352503 ,本文出自[张鸿洋的博客] 1.概述 上一篇已经基本给大家介绍了如 ...

  9. PHP中GD库是做什么用的? PHP GD库介绍11111111

    什么是gd库?    gd库是php处理图形的扩展库,gd库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片. 在网站上GD库通常用来生成缩略图或者用来对图片加水印或者对网站数据 ...

  10. 关于/proc/cpuinfo文件

    以上输出项的含义如下: processor :系统中逻辑处理核的编号.对于单核处理器,则课认为是其CPU编号,对于多核处理器则可以是物理核.或者使用超线程技术虚拟的逻辑核 vendor_id :CPU ...