简单树型列表（展示，编辑用）

已于 2022-08-06 00:47:06 修改
阅读量2k 收藏 16
点赞数 8
分类专栏： 前端 文章标签： jquery html5
于 2020-07-05 11:24:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN025/article/details/107135537
版权

千万年想起来发一篇博文，博大家一乐吧。

首先感谢大佬【龙恩0707】，本文数据结构转换部分参考借鉴大佬的博文 js将有父子关系的数据转换成树形结构数据 - 龙恩0707 - 博客园 ，有对这方面感兴趣的可跳转大佬正文。
自己设想的效果：树型展示，开开闭闭，能取自己、父级等的id（以便编辑删除等）。

效果图

别的废话少说，上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>power</title>
		<link href="./js/layui/css/layui.css" rel="stylesheet" />
		<script src="./js/jquery.min.js"></script>
		<script src="./js/layui/layui.all.js"></script>
	</head>
	<body>
		<table class="layui-table">
			<thead>
				<tr class="titleTr" style="text-align: center;">
					<th style="text-align: center;">名称</th>
					<th style="text-align: center;">链接</th>
					<th style="text-align: center;">操作</th>
				</tr>
			</thead>
			<tbody id="dataList"></tbody>
		</table>
		<script type="text/javascript">
			var nodes = [{
				"id": "1",
				"name": "1",
				"url": "sgdsfhbf.htm",
				"childNode": [{
					"id": "11",
					"name": "11",
					"url": "dfsdkfdkl.htm",
					"childNode": [{
						"id": "111",
						"name": "111",
						"url": "toPowerList",
						"childNode": []
					}]
				}]
			}, {
				"id": "2",
				"name": "2",
				"url": "",
				"childNode": [{
					"id": "21",
					"name": "21",
					"url": "",
					"childNode": [{
						"id": "211",
						"name": "211",
						"url": "toPowerList",
						"childNode": []
					}]
				}, {
					"id": "22",
					"name": "22",
					"url": "",
					"childNode": [{
						"id": "221",
						"name": "221",
						"url": "toPowerList",
						"childNode": [{
							"id": "2211",
							"name": "2211",
							"url": "",
							"childNode": [{
								"id": "22111",
								"name": "22111",
								"url": "toPowerList",
								"childNode": []
							}]
						},{
							"id": "2212",
							"name": "2212",
							"url": "",
							"childNode": [{
								"id": "22121",
								"name": "22121",
								"url": "toPowerList",
								"childNode": []
							}]
						},{
							"id": "2213",
							"name": "2213",
							"url": "",
							"childNode": [{
								"id": "22131",
								"name": "22131",
								"url": "toPowerList",
								"childNode": []
							}]
						},{
							"id": "2214",
							"name": "2214",
							"url": "",
							"childNode": [{
								"id": "22141",
								"name": "22141",
								"url": "toPowerList",
								"childNode": []
							}]
						}]
					}]
				}, {
					"id": "23",
					"name": "23",
					"url": "",
					"childNode": [{
						"id": "231",
						"name": "231",
						"url": "toPowerList",
						"childNode": []
					}]
				}]
			}];

			function initData(pid,list,divAreaName) {
				var trhtml = "";
				if (list.length > 0) {
					for (var i = 0; i < list.length; i++) {
						trhtml = "";
						trhtml += "<tr class=\'"+pid+"\' id=\'"+(pid+"_"+list[i].id)+"\'>";
						trhtml += "<td"+((list[i].childNode.length > 0)?" onclick=\"chickTr(\'"+(pid+"_"+list[i].id)+"\')\"":"")+">";
						if (list[i].childNode.length > 0) {
							trhtml += "<img class='gb' id=\'img_"+(pid+"_"+list[i].id)+"\' src='./img/wenjianjia_gb_xi.png' height='16px' />";
						}else {
							trhtml += "<img src='./img/wenjian_xi.png' height='16px' />";
						}
						trhtml += list[i].name;
						trhtml += "</td>";
						trhtml += "<td>";
						trhtml += list[i].url;
						trhtml += "</td>";
						trhtml += "<td style=\"text-align: center;\">";
						trhtml += "<a href='#' onclick='layer.alert("+list[i].id+")'><font color='blue'>修改</font></a>";
						trhtml += " | <a href='#' onclick='layer.alert("+list[i].id+")'><font color='blue'>删除</font></a>";
						trhtml += " | <a href='#' onclick='layer.alert("+list[i].id+")'><font color='blue'>添加下级权限</font></a>";
						trhtml += " | <a href='#' onclick='layer.alert("+list[i].id+")'><font color='blue'>添加本级权限</font></a>";
						trhtml += "</td>";
						trhtml += "</tr>";
						$("#"+divAreaName+"").append(trhtml);
						//console.log(list[i].childNode)
						if (list[i].childNode.length > 0) {
							initData((pid+"_"+list[i].id),list[i].childNode,divAreaName);
						}
					}
				}
			}
			function chickTr(showTrClassName){
				var isDkThisTr = $("#img_"+showTrClassName).attr("class");
				$(".dk").attr("class","gb").attr("src","./img/wenjianjia_gb_xi.png");
				$("tr").hide();
				$(".titleTr").show();
				$(".root").show();
				var showTrIdList = showTrClassName.split("_");
				var showTrClassNames = "";
				for (var j = 0; j < showTrIdList.length; j++) {
					if(j==0){
						showTrClassNames += showTrIdList[j];
					}else {
						showTrClassNames += ("_" + showTrIdList[j]);
					}
					if(showTrClassNames != showTrClassName){
						$("."+showTrClassNames).show();
						$("#img_"+showTrClassNames).attr("class","dk").attr("src","./img/wenjianjia_dk_xi.png");
					}
				}
				if ("dk" == isDkThisTr) {
					$("#img_"+showTrClassName).attr("class","gb").attr("src","./img/wenjianjia_gb_xi.png");
					$("."+showTrClassName).hide();
				}else {
					$("."+showTrClassName).show();
					$("#img_"+showTrClassName).attr("class","dk").attr("src","./img/wenjianjia_dk_xi.png");
				}
			}
			$(function (){
				initData("root",nodes,"dataList");
				$("tr").hide();
				$(".titleTr").show();
				$(".root").show();
			});
		</script>
	</body>
</html>

分析：（额，没什么分析的，就是觉得太长，拆分一下）

碰///瓷layui 

虽然head标签一通瞎加载，但是这个例子里只有jQuery用的多，layui就用了下样式、layer弹出层 （这些不想用的话，自己写一个更香）

HTML

<table class="layui-table">
	<thead>
		<tr class="titleTr" style="text-align: center;">
			<th style="text-align: center;">名称</th>
			<th style="text-align: center;">链接</th>
			<th style="text-align: center;">操作</th>
		</tr>
	</thead>
	<tbody id="dataList"></tbody>
</table>

里边三个注意点：

1，table标签class不能写错，毕竟我用的layui的样式；

2，thead里的tr标签的class可以不用这个，但是需要和下边JavaScript里保持一致，至于样式，想怎么来怎么来；

3，#dataList，除了名称得和下边保持一致，其他的随意。

目前就只有一个列表，需要的什么搜索啦、按钮啦......根据你的需求自己加。

JavaScript

大部分我在编辑这一块时候又加了注释，注意看

1，数据格式

//主要的就id/name/childNode，其他的看心情加
var nodes = [{
	"id": "1",
	"name": "1",
	"url": "sgdsfhbf.htm",
	"childNode": [{
		"id": "11",
		"name": "11",
		"url": "dfsdkfdkl.htm",
		"childNode": [{
			"id": "111",
			"name": "111",
			"url": "toPowerList",
			"childNode": []//这玩意儿即使没下级，也要让后台给你搞个空集合
		}]
	}]
}, {
	"id": "2",
	"name": "2",
	"url": "",
	"childNode": [{
		"id": "21",
		"name": "21",
		"url": "",
		"childNode": [{
			"id": "211",
			"name": "211",
			"url": "toPowerList",
			"childNode": []
		}]
	}, {
		"id": "22",
		"name": "22",
		"url": "",
		"childNode": [{
			"id": "221",
			"name": "221",
			"url": "toPowerList",
			"childNode": [{
				"id": "2211",
				"name": "2211",
				"url": "",
				"childNode": [{
					"id": "22111",
					"name": "22111",
					"url": "toPowerList",
					"childNode": []
				}]
			},{
				"id": "2212",
				"name": "2212",
				"url": "",
				"childNode": [{
					"id": "22121",
					"name": "22121",
					"url": "toPowerList",
					"childNode": []
				}]
			},{
				"id": "2213",
				"name": "2213",
				"url": "",
				"childNode": [{
					"id": "22131",
					"name": "22131",
					"url": "toPowerList",
					"childNode": []
				}]
			},{
				"id": "2214",
				"name": "2214",
				"url": "",
				"childNode": [{
					"id": "22141",
					"name": "22141",
					"url": "toPowerList",
					"childNode": []
				}]
			}]
		}]
	}, {
		"id": "23",
		"name": "23",
		"url": "",
		"childNode": [{
			"id": "231",
			"name": "231",
			"url": "toPowerList",
			"childNode": []
		}]
	}]
}];

2，装入数据（）

/*
pid：上级id（第一级pid传自己喜欢的值就行，注意避免和数据id搞混）
list：需要添加的数据
divAreaName：添加到哪里，就前边让你保持一致那个
*/
function initData(pid,list,divAreaName) {
	var trhtml = "";
	if (list.length > 0) {
		for (var i = 0; i < list.length; i++) {//循环
			trhtml = "";
			trhtml += "<tr class=\'"+pid+"\' id=\'"+(pid+"_"+list[i].id)+"\'>";
            /*把点击事件加在td上，避免点击【操作】时触发*/
			trhtml += "<td"+((list[i].childNode.length > 0)?" onclick=\"chickTr(\'"+(pid+"_"+list[i].id)+"\')\"":"")+">";
			if (list[i].childNode.length > 0) {//添加图片，一是好看，二是为之后的打开关闭做标志
				trhtml += "<img class='gb' id=\'img_"+(pid+"_"+list[i].id)+"\' src='./img/wenjianjia_gb_xi.png' height='16px' />";
			}else {
				trhtml += "<img src='./img/wenjian_xi.png' height='16px' />";
			}
			trhtml += list[i].name;
			trhtml += "</td>";
			trhtml += "<td>";
			trhtml += list[i].url;
			trhtml += "</td>";
			trhtml += "<td style=\"text-align: center;\">";
			trhtml += "<a href='#' onclick='layer.alert("+list[i].id+")'><font color='blue'>修改</font></a>";
			trhtml += " | <a href='#' onclick='layer.alert("+list[i].id+")'><font color='blue'>删除</font></a>";
			trhtml += " | <a href='#' onclick='layer.alert("+list[i].id+")'><font color='blue'>添加下级权限</font></a>";
			trhtml += " | <a href='#' onclick='layer.alert("+list[i].id+")'><font color='blue'>添加本级权限</font></a>";
			trhtml += "</td>";
			trhtml += "</tr>";
			$("#"+divAreaName+"").append(trhtml);
			//console.log(list[i].childNode)
			if (list[i].childNode.length > 0) {
				initData((pid+"_"+list[i].id),list[i].childNode,divAreaName);//有下级就递归继续加
			}
		}
	}
}

3，列表展开关闭点击事件

/*showTrClassName：当前点的ID值，即需要开闭的class值*/
function chickTr(showTrClassName){
	var isDkThisTr = $("#img_"+showTrClassName).attr("class");//首先记录点击的那个开闭状态
	$(".dk").attr("class","gb").attr("src","./img/wenjianjia_gb_xi.png");//所有全关闭
	$("tr").hide();
	$(".titleTr").show();
	$(".root").show();//基本展示
	var showTrIdList = showTrClassName.split("_");
	var showTrClassNames = "";
	for (var j = 0; j < showTrIdList.length; j++) {//将父级全部打开
		if(j==0){
			showTrClassNames += showTrIdList[j];
		}else {
			showTrClassNames += ("_" + showTrIdList[j]);
		}
		if(showTrClassNames != showTrClassName){
			$("."+showTrClassNames).show();
			$("#img_"+showTrClassNames).attr("class","dk").attr("src","./img/wenjianjia_dk_xi.png");
		}
	}
	if ("dk" == isDkThisTr) {//判断自身开闭
		$("#img_"+showTrClassName).attr("class","gb").attr("src","./img/wenjianjia_gb_xi.png");
		$("."+showTrClassName).hide();
	}else {
		$("."+showTrClassName).show();
		$("#img_"+showTrClassName).attr("class","dk").attr("src","./img/wenjianjia_dk_xi.png");
	}
}

4，【操作】（略，目前写的是弹出层提示，所以取id就取当前id，取父级就取class然后自己截取）

5，初次加载（包括简易版的ajax请求）

$(function (){
	initData("root",nodes,"dataList");
	$("tr").hide();
	$(".titleTr").show();
	$(".root").show();
	/*后台请求*/
	/*$.ajax({
		url:"queryPower",
		success: function (res){
			initData("root",res.nodes,"dataList");//当res={...,nodes=[],...}时
			initData("root",res,"dataList");//当res=[]时
			$("tr").hide();
			$(".titleTr").show();
			$(".root").show();
		}
	});*/
});

数据结构转换

很多时候我们后端会直接传一个列表回来（如下），那么这时候就需要转换数据形式。

数据结构转换这块懒省事，直接借鉴的大佬【龙恩0707】的博文 js将有父子关系的数据转换成树形结构数据 - 龙恩0707 - 博客园

var nodes = [{
				"id":"1",
				"name":"1",
				"url":"1",
				"pid":"root"
			},{
				"id":"11",
				"name":"11",
				"url":"11",
				"pid":"1"
			},{
				"id":"12",
				"name":"12",
				"url":"12",
				"pid":"1"
			},{
				"id":"121",
				"name":"121",
				"url":"121",
				"pid":"12"
			},{
				"id":"122",
				"name":"122",
				"url":"122",
				"pid":"12"
			},{
				"id":"2",
				"name":"2",
				"url":"2",
				"pid":"root"
			},{
				"id":"21",
				"name":"21",
				"url":"21",
				"pid":"2"
			},{
				"id":"211",
				"name":"211",
				"url":"211",
				"pid":"21"
			},{
				"id":"22",
				"name":"22",
				"url":"22",
				"pid":"2"
			}];
// 属性配置设置
let attr = {
	id: 'id',
	pid: 'pid',
	name: 'name',
	url: 'url',
	rootId: "root"
};
function toTreeData(data, attr) {
	let tree = [];
	let resData = data;
    //装入一级目录
	for (let i = 0; i < resData.length; i++) {
		if (resData[i].pid === attr.rootId) {
			let obj = {
				id: resData[i][attr.id],
				name: resData[i][attr.name],
				url: resData[i][attr.url],
				childNode: [],
			};
			tree.push(obj);
			resData.splice(i, 1);
			i--;
		}
	}
    //逐层装入下级
	var run = function(treeArrs) {
		if (resData.length > 0) {
			for (let i = 0; i < treeArrs.length; i++) {
				for (let j = 0; j < resData.length; j++) {
					if (treeArrs[i].id === resData[j][attr.pid]) {
						let obj = {
							id: resData[j][attr.id],
							name: resData[j][attr.name],
							url: resData[i][attr.url],
							childNode: [],
						};
						treeArrs[i].childNode.push(obj);
						resData.splice(j, 1);
						j--;
					}
				}
				run(treeArrs[i].childNode);
			}
		}
	};
	run(tree);
	return tree;
}
let arr = toTreeData(nodes, attr);

 好久好久以后，20220806再次更新，下面版本适合根节点数目不定的情况，比如不是全树展示，只展示关键字搜索后的结果

function listToTree(menuList) {
			let menuTree = [];
			if (menuList && menuList.length > 0) {
				let pidall = [];
				menuList.forEach(m => {
					if (pidall.length == 0) {
						pidall.push(m.pid);
					} else{
						let haspid = false;
						pidall.forEach(p => {
							if (p == m.pid) {
								haspid = true;
							}
						})
						if (!haspid) {
							pidall.push(m.pid);
						}
					}
				})
				let pids = [];
				pidall.forEach(p => {
					let hasid = false;
					menuList.forEach(m => {
						if (p == m.id) {
							hasid = true;
						}
					})
					if (!hasid) {
						pids.push(p);
					}
				})
				var run = function (list,pid) {
					let children = [];
					for (var i = 0; i < list.length; ) {
						if (list[i].pid == pid) {
							children.push(list[i]);
							list.splice(i,1);
						} else {
							i++;
						}
					}
					if (children.length > 0) {
						children.forEach(child => {
							child.children = run(list,child.id);
						})
					}
					return children;
				}
				pids.forEach(p => {
					menuTree.push(run(menuList,p));
				})
			}
			return menuTree;
		}

最后

不要觉得简单，就直接复制粘贴！要不发现有的地方有点儿丑，那不是废话吗？好好看看我分析的内容！

csdn025
关注
  • 8
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
树形列表
珍妮的小罐君
02-21 475
树形列表的展开与收缩 div{float:left; height: 100px; line-height: 100px; } #d1,#d3{ background-color: #ccff00; } #d2{ cursor: pointer; background-color: #ffcc00; }
树形列表html
10-13
树形列表
树状列表
weixin_33979203的博客
02-05 116
alvintree文件 css样式 @charset "utf-8"; .alvintree_item{ height:30px;font-size:14px; font-family:微软雅黑; text-align:left; vertical-align:middle; line-height:30px; padding:0px 5px; background-image:url(...
html+js实现树形表格
最新发布
huaweichenai的博客
07-26 319
【代码】html+js实现树形表格。
note_37：树形列表
Blog
03-28 398
树形列表 缩进目录 文章目录树形列表缩进目录1. 打印列表2. 树形列表 假设json数据的bean类如下： DataBean.java public class DataBean { private List<MainChapterBean> mainChapterList; public List<MainChapterBean> getMainChapte...
树型框取编辑状态选中文本
06-02
在IT领域，"树型框取编辑状态选中文本"是一种常见的用户界面设计技术，尤其在数据管理和系统配置等场景中应用广泛。这个概念主要涉及的是如何在一个具有树状结构的控件（即树型框）中实现文本的选取和编辑状态的控制...
易语言简单树型框分割文本
07-22
在“易语言简单树型框分割文本”这个主题中，我们主要关注的是如何在易语言中实现一个树型框（TreeCtrl）来展示和处理文本内容。树型框是一种常见的用户界面元素，通常用于呈现层次结构的数据，比如文件系统或组织...
treed一个强大的树型编辑组件
08-10
`Treed` 是一款强大的基于 JavaScript 的树型编辑组件，专为前端开发者设计，用于构建交互式的、层次化的用户界面。在网页应用中，这种组件常用于数据组织、目录导航、文件系统展示等场景。Treed 提供了丰富的功能和...
树型菜单
03-26
它以树状的形式展示信息层次结构，允许用户通过展开和折叠节点来探索和操作数据。下面我们将深入探讨树型菜单的相关知识点。 1. **数据结构基础** 树型菜单的基础是树数据结构，它由节点（或称为顶点）和边组成，...
能将光盘等驱动器中的文件以树型或列表形式显示储存的工具
08-03
它以清晰的树型或列表视图展示文件和目录，使得用户能够轻松理解文件系统的层次关系。这种可视化的表示方式对于整理文件、查找特定文件或备份目的尤其有用。 在【描述】中提到，File Tree Printer能够将文件目录...
List树形列表界面
12-28
List树形列表界面。 简洁漂亮。
js制作的树型列表 TreeGrid
12-24
js制作的树型列表 TreeGrid，非常漂亮的js制作的动态树！
树形结构列表实现（RecyclerView实现）
疯语者
02-10 4364
前言   之前习惯用ListView实现列表功能，但是现在很多项目都开始使用RecyclerView，所以本次实现考虑用RecyclerView实现列表功能，顺便复习一下RecyclerView的使用方法。树形结构的实现，难点在于节点选中或展开收起时需要同时考虑父节点和子节点的展示（展开或收起子节点）和选中情况（部分选中、全部选中、未选中三种状态）。先看一下我实现的效果    当节点A勾选时，其子...
Android中的树状(tree)列表
l970859633的博客
12-22 5839
转载地址：http://www.cnblogs.com/xiaofeixiang/p/4109969.html 树状列表前端挺常用的，还有人专门写过Ztree，Android中有的时候也需要使用到树状列表，上篇文章写了一下ExpandableListView，ExpandableListView最多支持两级结构，Android中没有三层结构的组件，这个时候需要自己去扩展，可以扩展Expa
树形数据列表的使用
weixin_30457881的博客
05-12 518
1 概述 在集成项目中，涉及到数据分析部分的工作内容，大部分的图表是通过两个维度的控制来显示（一般为业务事项和时间），本次在项目中遇到的便是银行账户的列表，根据前期的调研和讨论总结，确定了银行账户需要展现的形式（即通过树形列表来展现） ，而之前开发的数据分析功能采用的都是基本数据列表，并没有树形数据列表的使用说明，本文用来说明树形数据列表的使用。 2 预期读者 数通畅联内部员工...
Tree列表
xiaoxiaode_shu的博客
07-08 247
新点tree 页面写的 <!-- 必须有，加载时的loading效果 --> <div class="page-loading"></div> <div class="fui-left"> <div role="head" title="选择部门"></div> &l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值