关键词:
最近开发过程中,需要写一个公司人员组织架构的树状图,后来选用了依赖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使用实例
一、获取点击选中的值:<linkrel="stylesheet"href="./static/libs/ztree/css/metroStyle/metroStyle.css"type="text/css"><!--ztree--><scriptsrc="./static/libs/ztree/js/jquery.ztree.core-3.5.js"></ 查看详情
使用ztree插件构建树形菜单
zTree下载:https://github.com/zTree/zTree_v3目录:就我看来,zTree较为实用的有以下几点:zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。支持JSON数据支持静态和Ajax异步... 查看详情
ztreejquery-ztree的基本使用
1.zTree的下载地址 https://gitee.com/zTree/zTree_v3 API文档:http://www.treejs.cn/v3/api.php2.引入需要的文件 <scripttype="text/javascript"src="../libs/ztree/jquery.ztree.core.js"></script> <scriptt 查看详情
004ztree入门-bos
使用标准json数据构造ztree 1.使用标准json构造ztree,children属性用于描述子节点,可以无限嵌套下去 2.name属性用于描述节点名称 3.缺点是结构很混乱,不易修改,代码阅读、维护困难 4.示例代码 <!--展示ztree效果:使用标准json数... 查看详情
ztree使用过程(代码片段)
1、引入ZTree所需要的js和css<scriptsrc="<%=path%>/static/js/jquery.ztree.core.min.js"type="text/javascript"></script><scriptsrc="<%=path%>/static/js/jquery.ztree.excheck.min.js"type= 查看详情
笔记ztree的使用
引用的js和css:<!--zTreeJS--><scripttype="text/javascript"src="jquery/jquery-1.7.min.js"></script><scripttype="text/javascript"src="zTree/js/jquery.ztree.core-3.2.js"></script> 查看详情
ztree的使用
zTree可以实现树形结构的关系。一般会出现在部门的上下级关系,角色权限的分配等模块中...zTree格式要求:即Json的复杂格式 [{id:"..",pId:"..",name:"..",checked:"true/false"}]id:标识当前的id;pId:父节点的id;name:节点名称(就是在... 查看详情
ztree的简单使用和后台交互的写法
一、引入ztree的头文件<!--引入ztree/--> <scripttype="text/javascript"src="${pageContext.request.contextPath}/lib/ztree/js/jquery-1.8.3.min.js"></script> <scripttype="text/javascript"src="$ 查看详情
ztree介绍及相关属性使用
...能、灵活的配置、多种功能的组合是zTree最大优点。具体使用可查看参考网站:http://www.treejs.cn/v3/demo.php#_101 里面有demo说明和api文档 (http://www.treejs.cn/v3/api.php)使用前 查看详情
$.fn.ztree的使用
如图所示显示效果为树状结构:(jquery.ztree.core-3.5.js)实现:html:<div> <divclass="foundation-gridTitlehc-title-areano-border-top-left-right">数据分类</div> <ulid="treeDemo"class="ztree"hr-self-heigh 查看详情
ztree使用,带搜索
/***Createdbyvlsionon2017-10-31*/varsetting={view:{addHoverDom:addHoverDom,removeHoverDom:removeHoverDom,selectedMulti:false},edit:{enable:true,editNameSelectAll:true,showRemoveBtn:true,showRenameBtn: 查看详情
ztree使用教程
这两天项目需要写一个树形帮助,学习了我们项目组的老师的Ztree的树的写法,实现了这个帮助,下面来总结一下Ztree的用法。(也是参考的一篇csdn上的博客了)zTree是一个依靠jQuery实现的多功能“树插件”。被广泛应用在... 查看详情
使用两个ztree,调用一个oncheck函数,分别展开不同的节点
问题:在一个页面使用了两个zTree,用选项卡区分,现在要点击节点展示相应的子节点,两个zTree怎么区分?解决方案:1functiononCheck(e,treeId,treeNode){2console.log(treeId);3//清空所有已选人员4$("#yxChk").html("");5zTree=$.fn.zTree.getZTreeObj("treeUs... 查看详情
ztree的使用整理
/**配置:知识点管理*/varsetting={view:{showIcon:false,addDiyDom:addPrevDom,addHoverDom:addHoverDom,removeHoverDom:removeHoverDom,selectedMulti:false},callback:{beforeDrag:beforeDrag,beforeDrop:beforeDrop,befo 查看详情
使用ztree展开节点后,覆盖了下一个节点
如图所示,结果是zTree与<fieldset>标签不兼容。。。。我去!!!也就是说Ztree不能放在<fieldset>标签中。。 查看详情
(十四)角色管理(ztree插件的基本使用)
1.建表角色表菜单表 角色-菜单表 查看详情
ztree的使用(代码片段)
一、异步加载 functionrenderStationTree()varsetting=view:dblClickExpand:false,async:enable:true,url:"../merchant/getMerchantTree",type:"post",autoParam:["id"],data:key:name:"name",,simpleData:enab 查看详情
ztree入门使用(代码片段)
简单入门使用,熟悉其功能,没有与异步调用后台数据,用的是本地设置的数据。zTree的API:http://www.treejs.cn/v3/api.php 先看效果 目录结构 代码1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title& 查看详情