ztree树形根据最底层子节点往上遍历案例

最新推荐文章于 2022-11-17 14:14:33 发布

chenqunjian

最新推荐文章于 2022-11-17 14:14:33 发布

阅读量3.1k

点赞数

分类专栏： web前端文章标签： jquery 遍历 ztree树形根据最底层子节点往上遍历

本文链接：https://blog.csdn.net/chenqunjian/article/details/77103877

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://libs.cdnjs.net/zTree.v3/3.5.12-beta.2/css/zTreeStyle/zTreeStyle.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.29/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div id="div1"></div>
<ul id="tree" class="ztree" style="width:560px; overflow:auto;"></ul>

<ul id="treeD" class="ztree" style="width:560px; overflow:auto;"></ul>
</body>
<script type="text/javascript">
var zNodes = [{
"id": "191891096396238848",
"pId": "756033561093476351",
"name": "测试数据",
"open": "false",
"orgFlag": "1"
}, {
"id": "756033561093476351",
"pId": "0",
"name": "总机构",
"open": "false",
"orgFlag": "1"
}, {
"id": "756033561093476352",
"pId": "756033561093476351",
"name": "中石油",
"open": "false",
"orgFlag": "1"
}, {
"id": "756033561093476353",
"pId": "756033561093476352",
"name": "中石油青海销售公司",
"open": "false",
"orgFlag": "1"
}, {
"id": "756033561093476354",
"pId": "756033561093476352",
"name": "中石油浙江销售公司",
"open": "false",
"orgFlag": "1"
}, {
"id": "756033561093476355",
"pId": "756033561093476353",
"name": "中石油青海销售西宁分公司",
"open": "false",
"orgFlag": "1"
}, {
"id": "756033561093476356",
"pId": "756033561093476353",
"name": "中石油青海销售湟源分公司",
"open": "false",
"orgFlag": "1"
}, {
"id": "756033561093476357",
"pId": "756033561093476354",
"name": "中石油浙江销售杭州分公司",
"open": "false",
"orgFlag": "1"
}, {
"id": "756033561093476358",
"pId": "756033561093476351",
"name": "未来油站(北京)科技有限公司",
"open": "false",
"orgFlag": "1"
}, {
"id": "756033561093476359",
"pId": "756033561093476358",
"name": "未来油站北京公司",
"open": "false",
"orgFlag": "1"
}, {
"id": "210418794408054784",
"pId": "756033561093476355",
"name": "测试油站",
"open": "false",
"orgFlag": "2",
"checked": "true"
}, {
"id": "210419105663160320",
"pId": "756033561093476359",
"name": "测试10086",
"open": "false",
"orgFlag": "2",
"checked": "true"
}, {
"id": "210419392717131776",
"pId": "191891096396238848",
"name": "上海油站",
"open": "false",
"orgFlag": "2",
"checked": "true"
}, {
"id": "211806239888379904",
"pId": "756033561093476355",
"name": "测试",
"open": "false",
"orgFlag": "2",
"checked": "true"
}, {
"id": "678825029567385608",
"pId": "756033561093476359",
"name": "中石油北汽安定门店",
"open": "false",
"orgFlag": "2",
"checked": "true"
}, {
"id": "678825029567385610",
"pId": "756033561093476359",
"name": "小西天加油站",
"open": "false",
"orgFlag": "2",
"checked": "true"
}
]
/*

*
* @describe unique通过prototype原型链扩张的数组函数，作用用于去掉重复数组。
* @author 908637150@qq.com
* @createDate 2017年8月11日下午9:40:00
* */

Array.prototype.unique = function() {
var newArr = [this[0]]; //数组结果
for(var i = 0, len = this.length; i < len; i++) {
var repeat = false; //设置重复参数
for(var j = 0, len2 = newArr.length; j < len2; j++) {
if(this[i] == newArr[j]) {
repeat = true; //若重复设置为true
break;
}
}
//去重push数组
if(!repeat) {
newArr.push(this[i]);
}
}
return newArr;
};

/*

*
* @describe unique通过prototype原型链扩张的数组函数，作用用于去掉重复数组。
* @author 908637150@qq.com
* @createDate 2017年8月11日下午9:40:00
* */

var CHELIDARRAY = [];
for (var i = 0; i < zNodes.length; i++) {
if(zNodes[i].orgFlag == "2") {
CHELIDARRAY.push(zNodes[i]);
}
}
var yy = CHELIDARRAY.unique(CHELIDARRAY);
/*

*
* @param arrays 子集数组
* @param zNodes 全集数组
* @param TEMP 时变量用于保存递归循环出来的数组集合
* @param OLDARR 临时变量用于保存循环前的数组集合
* @function arrChild 返回递归子集数组
* @function concat 全集数组
* @describe arrCom函数功能：遍历全集，判断递归返回子集数组中第零个数组集中的元素pId是否为零（递归终止条件），不为零调用arrChild函数返回子集，
* @author 908637150@qq.com
* @createDate 2017年8月11日下午9:40:00
* */

function arrCom(arrays){
var TEMP = [];
var OLDARR = arrays;
for (var j = 0; j < zNodes.length; j++) {
if(arrays[0].pId != 0) {
arrChild(arrays, zNodes);
arrays = arrChild(arrays, zNodes);
temps = OLDARR.concat(arrays);
}
TEMP = TEMP.concat(temps);
TEMP = TEMP.unique(TEMP);
}
return TEMP;
}

/*

*
* @param arrays 子集数组
* @param zNodes 全集数组
* @describe arrChild函数功能：遍历子集，根据子集数组的pId与全集数组id进行匹配，然后返回匹配结果集。
* @author 908637150@qq.com
* @createDate 2017年8月11日下午9:40:00
* */
function arrChild(arrays, zNodes){
var Child = [];
for (var f = 0; f < arrays.length; f++) {
for (var g = 0; g < zNodes.length; g++) {
if (arrays[f].pId == zNodes[g].id) {
Child.push(zNodes[g]);
}
}
}
Child = Child.unique(Child);
return Child;
}

/*

*
* @describe 测试获取的数据是否正确
* @author 908637150@qq.com
* @createDate 2017年8月11日下午9:40:00
* */
var WW = arrCom(yy);
console.info(WW);
var html = '';
for(var i=0;i<WW.length;i++){
html+= '<p>'+'{id:'+WW[i].id+',pid:'+WW[i].pId+',name:'+WW[i].name+',orgFlag:'+WW[i].orgFlag+'}'+'</p>';
}
document.getElementById("div1").innerHTML=html;

var setting = {
check: {
enable: true
},
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: "0"
}
},
callback: {
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if(treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
demoIframe.attr("src", treeNode.file + ".html");
return true;
}
}
}
};

$(document).ready(function() {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, WW);
var zTree = $.fn.zTree.getZTreeObj("tree");
var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.expandAll(true);
});
</script>
</html>

chenqunjian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ztree树形根据最底层子节点往上遍历案例

var zNodes = [{"id": "191891096396238848","pId": "756033561093476351","name": "测试数据","open": "false","orgFlag": "1"}, {"id": "756033561093476351","pId": "0","name": "总机构","open": "
复制链接

扫一扫