Layui树形表格组件的实现

最新推荐文章于 2024-06-28 03:45:22 发布
最新推荐文章于 2024-06-28 03:45:22 发布
阅读量4.1k 收藏 13
点赞数 2
分类专栏： Layui使用笔记 文章标签： js layui树形表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013020593/article/details/105969178
版权

效果图：
在这里插入图片描述
在这里插入图片描述

一、Layui树形组件：treetable.js

可在layui下创建一个文件夹保存组件的js代码，以便引用。

// 基于layui table的树形表格实现,只支持页面仅有一个表格的情况
layui.define(['table', 'util'], function(exports) {
	var $ = layui.$,
		util = layui.util,
		table = layui.table;

	var ICON_FILE = 'layui-icon-file',
		ICON_RIGHT = 'layui-icon-triangle-r',
		ICON_DOWN = 'layui-icon-triangle-d',
		TABLE_VIEW = '.layui-table-view';
	var treetable = {
		config: {
			tempTop: 0,
			currIndex: -1,
			field: ''
		}, //全局配置项
		render: function(options) {
			var that = this;
			that.config = $.extend({}, that.config, options);
			render(options);
		},
		renderNode: function(node, data) {
			this.config.field = node.field;
			return renderNode(node, data);
		},
		done: function(datas) {
			var that = this;
			that.config.data = datas;
			done(that.config);
		},
		add: function(param) {
			add(this.config, param);
		},
		del: function(param) {
			del(this.config, param);
		},
		expandAll: function(tableID, successEvent) {
			this.config.successEvent = successEvent;
			expandAll(this.config, tableID);
		},
		foldAll: function(tableID) {
			foldAll(tableID);
		}
	};
	var render = function() {
		var that = treetable,
			options = that.config;
		var data = {
			id: 0
		};
		options.level = 0;
		options.data = data;
		if (options.load) {
			options.load(options, function(data) {
				$.each(data, function(index, item) {
					item.level = 1; //菜单级别,初始化时level=1:一级
				});
				table.reload(options.id, {
					data: data
				});
			});
		}
	};
	var renderNode = function(node, data) {
		var name = node.field;
		var spread = data.spread && true;
		let result = '<i class="layui-icon layui-treetable-node-op layui-icon-';
		let icon = 'file';
		let icon2 = '';
		let event = '';
		if (!data.leaf) {
			icon = spread ? 'triangle-d' : 'triangle-r';
			icon2 = ' <i class="layui-icon layui-icon-layer"></i>';
			event = ' lay-op-event="toggle"';
		}
		var style = '" style="margin-left: ' + (data.left || 0) + 'px"';
		var fname = data[name] || '';
		return result + icon + style + event + '></i>' + icon2 + '&nbsp;&nbsp;<span class="layui-treetable-node-span">' +
			fname + '</span>';
	};
	var done = function(config) {
		var rows = config.data;
		var tableID = config.id;
		var tempTop = config.tempTop;
		var currIndex = config.currIndex;
		var trs = $('[lay-id="' + tableID + '"] .layui-table-main tr');
		//新增行、展开行被选中
		if (currIndex > -1) {
			trs.eq(currIndex).addClass('layui-table-click').siblings().removeClass(
				'layui-table-click');
		}
		for (let i = 0; i < rows.length; i++) {
			//隐藏加载前的行
			if (rows[i].hide) {
				trs.eq(i).addClass('layui-hide');
			}
			//添加级别
			trs.eq(i).attr('lay-level', rows[i].level);
		}
		//重回到上次浏览位置
		$("[lay-id='" + tableID + "']").find(".layui-table-main").animate({
			scrollTop: tempTop
		}, 0);
	}
	var add = function(config, param) {
		var tableID = param.elem;
		var currTr = param.tr; //
		var data = param.data;
		var field = config.field;
		//叶子
		//获取新ID
		//获取选中行
		var rowIndex;
		var oldData = table.cache[tableID];
		var newData = {
			level: 0,
			parent: 0,
			leaf: true
		};
		$.extend(newData, data);
		if (currTr.length == 0) {
			//在末尾添加行
			rowIndex = oldData.length;
			config.currIndex = oldData.length;
			oldData.push(newData);
		} else {
			var currIndex = currTr.eq(0).data('index');
			//在选中行子集中末尾插入行
			config.currIndex = currIndex;
			var rowData = oldData[currIndex];
			var opIcon = currTr.find('[data-field="' + field + '"] .layui-icon').eq(0);
			var left = Number(opIcon.css("margin-left").replace('px', ''));
			var level = rowData.level;
			var id = rowData.id;
			//改变操作列图标
			if (opIcon.hasClass('layui-icon-file')) {
				//文件图标改为可点击图标
				rowData.leaf = false;
				rowData.spread = true;
				rowData.loaded = true;
			} else if (opIcon.hasClass('layui-icon-triangle-r')) {
				//调用点击展开事件
				opIcon.trigger('click');
			}
			//同级的下一个节点即为新增节点的下标，如果同级没有下一个节点，则上级的下一节点
			var maxIndex = config.currIndex + 1;
			var breakFlag = false;
			for (let i = maxIndex; i < oldData.length; i++) {
				if (oldData[i].level <= level) {
					maxIndex = i;
					breakFlag = true;
					break;
				}
			}
			if (!breakFlag) {
				maxIndex = oldData.length;
			}
			rowIndex = maxIndex;
			config.currIndex = maxIndex;
			newData.left = left + 20;
			newData.level = level + 1;
			newData.parent = rowData.id;
			oldData.splice(rowIndex, 0, newData); //插入
		}
		var rowHeight = $("[lay-id='" + tableID + "']").find(".layui-table-main").find('tr').height() + 1;
		config.tempTop = $("[lay-id='" + tableID + "']").find(".layui-table-main").scrollTop() + rowHeight;
		table.reload(tableID, {
			data: oldData
		});
	}
	var del = function(config, param) {
		var tableID = param.elem;
		var rowIndex = param.index;
		var onlyLeaf = param.onlyLeaf;
		//获取选中行
		var currTr = $("[lay-id='" + tableID + "'] .layui-table-main").find("tr").eq(rowIndex);
		var oldData = table.cache[tableID];
		var rowData = oldData[rowIndex];
		if (!rowData) {
			return;
		}
		var pid = rowData.parent;
		//如果只能删除叶子节点
		if (onlyLeaf) {
			//判断是否是叶子节点
			if (rowData.leaf) {
				oldData.splice(rowIndex, 1);
			}
		} else {
			//删除选中节点及子节点
			var ids = [];
			setDeleteIds(rowData.id);
			oldData = oldData.filter(function(v) {
				return ids.indexOf(v.id) == -1;
			});

			function setDeleteIds(id) {
				ids.push(id);
				//是否有子节点
				var children = oldData.filter(function(v) {
					return v.parent == id;
				});
				if (children.length > 0) {
					for (var i = 0; i < children.length; i++) {
						setDeleteIds(children[i].id);
					}
				}
			}
		}
		if (pid != 0) {
			//检查父节点是否还有子节点
			var siblings = oldData.filter(function(v) {
				return v.parent == pid;
			});
			if (siblings.length == 0) {
				var parentData = oldData.filter(function(v) {
					return v.id == pid;
				})[0];
				oldData[parentData.LAY_TABLE_INDEX].leaf = true;
			}
		}
		config.tempTop = $("[lay-id='" + tableID + "']").find(".layui-table-main").scrollTop();
		table.reload(tableID, {
			data: oldData
		});
	}
	var expandAll = function(options, tableID) {
		options.expandAll = true;
		var ICONS = {
			ICON_ADD: 'layui-icon-triangle-r',
			ICON_SUB: 'layui-icon-triangle-d',
			ICON_FILE: 'layui-icon-file'
		};
		tableID = '#' + tableID;
		var elem = $(tableID).next();
		if (options.expanded) {
			//显示所有行
			elem.find('tr.layui-hide').removeClass('layui-hide');
			//将折叠图标变为展开图标
			elem.find('.' + ICONS.ICON_ADD).addClass(ICONS.ICON_SUB).removeClass(ICONS.ICON_ADD);
			//回调方法
			if (options.successEvent) {
				options.successEvent();
			}
		} else {
			//触发展开图标的点击事件
			elem.find('.' + ICONS.ICON_ADD).addClass('spread').trigger('click');
			//设置定时任务，每0.5秒检查是否有未展开节点
			var count = 0;
			var interval = setInterval(function(e) {
				elem = $(tableID).next();
				count++;
				var addCount = elem.find('.' + ICONS.ICON_ADD).not('.spread').length;
				if (addCount == 0) {
					// 已全部展开标志
					options.expanded = true;
					delete options.expandAll;
					clearInterval(interval);
					//回调方法
					if (options.successEvent) {
						options.successEvent();
					}
				}else{
					elem.find('.' + ICONS.ICON_ADD).addClass('spread').trigger('click');
				}
			}, 200);
		}
	}
	var foldAll = function(tableID) {
		// 将缓存数据设置为收缩
		var datas = table.cache[tableID];
		for (var i = 0; i < datas.length; i++) {
			var item = datas[i];
			if (item.spread) {
				item.spread = false;
			}
			if (item.level > 1) {
				item.hide = true;
			}
		}
		var layBody = $('[lay-id="' + tableID + '"] .layui-table-main');
		// 隐藏除一级节点外的所有节点
		layBody.find('tr').not('[lay-level="1"]').addClass('layui-hide');
		// 将已展开节点图标变为未展开
		layBody.find('.' + ICON_DOWN).addClass(ICON_RIGHT).removeClass(ICON_DOWN);
		// 移除选中
		layBody.find('.layui-table-click').removeClass('layui-table-click');
		// 重新调整表格尺寸
		table.resize(tableID);
	}
	util.event("lay-op-event", {
		toggle: function(obj) { // 伸缩图标点击事件
			var config = treetable.config;
			//获取DOM元素
			var tableID = $(obj).parents(TABLE_VIEW).attr('lay-id');
			var tr = $(obj).parents('tr').eq(0);
			var td = $(obj).parents('td').eq(0);
			var rowIndex = tr.data('index');
			var rowData = table.cache[tableID][rowIndex];
			config.tempTop = $('[lay-id="' + tableID + '"] .layui-table-main').scrollTop();
			if (!rowData.loaded) { //未加载过
				rowData.loaded = true; //设为已加载
				rowData.spread = true; //设为已展开
				var left = Number($(obj).css('margin-left').replace('px', ''));
				var level = rowData.level || 0;
				//未加载过
				var node = {
					level: level,
					data: rowData
				}
				config.load(node, function(data) {
					var oldData = table.cache[tableID];
					for (let i = 0; i < data.length; i++) {
						let item = $.extend(data[i], {
							left: left + 20,
							level: level + 1
						});
						oldData.splice(rowIndex + i + 1, 0, item);
					}
					currIndex = rowIndex;
					table.reload(tableID, {
						data: oldData
					});
				});

				return;
			}
			//显示隐藏标志
			var showFlag = $(obj).hasClass(ICON_RIGHT); //true-显示
			var pid = rowData.id;
			if (showFlag) {
				$(obj).addClass(ICON_DOWN).removeClass(ICON_RIGHT);
				showChildren(pid);
			} else {
				$(obj).addClass(ICON_RIGHT).removeClass(ICON_DOWN);
				hideChildren(pid);
			}
			rowData.spread = showFlag;
			//重载尺寸
			table.resize(tableID);
		}

	});
	//展开
	var showChildren = function(pid) {
		//获取显示子菜单
		var children = table.cache[tableID].filter(function(v) {
			return v.parent == pid;
		});
		var trs = $('[lay-id="' + tableID + '"] .layui-table-main tr');
		for (let i = 0; i < children.length; i++) {
			trs.eq(children[i].LAY_TABLE_INDEX).removeClass('layui-hide');
			children[i].hide = false;
			//如果有子菜单，则显示子菜单
			if (children[i].spread && !children[i].leaf) {
				showChildren(children[i].id);
			}
		}
	}
	//收缩
	var hideChildren = function(pid) {
		//获取隐藏子菜单
		var children = table.cache[tableID].filter(function(v) {
			return v.parent == pid;
		});
		var trs = $('[lay-id="' + tableID + '"] .layui-table-main tr');
		for (let i = 0; i < children.length; i++) {
			trs.eq(children[i].LAY_TABLE_INDEX).addClass('layui-hide');
			children[i].hide = true;
			//如果有子菜单，则隐藏子菜单
			if (children[i].spread && !children[i].leaf) {
				hideChildren(children[i].id);
			}
		}
	}

	//输出treetable接口
	exports('treetable', treetable);
});

二、组件测试代码：treetableDemo.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<!-- <link rel="stylesheet" href="../layui/css/layui-extend.css" /> -->
		<title></title>
		<style>
			/* 树形表格树下拉节点样式 */
			.layui-treetable-node-op{
				position: relative;
				bottom: 1px;
			}
			.layui-treetable-node-span{
				position: relative;
				bottom: 2px;
			}
		</style>
	</head>
	<body>
		<div class="layui-fluid">
			<div class="layui-row">
				<div class="layui-btn-group">
					<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i> 新增</button>
					<button class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i> 删除</button>
					<button class="layui-btn layui-btn-sm" lay-event="expandAll"><i class="layui-icon layui-icon-down"></i> 全部展开</button>
					<button class="layui-btn layui-btn-sm" lay-event="foldAll"><i class="layui-icon layui-icon-up"></i> 全部折叠</button>
				</div>
			</div>
			<div class="layui-row">
				<table class="layui-hide" id="table" lay-filter="table"></table>
			</div>
		</div>
	</body>
	<script src="../layui/layui.js"></script>
	<script>
		layui.extend({
			treetable: '../layui/extend/treetable'
		});
		var tableID = 'table';
		/******************** layui.use初始化 *************************/
		layui.use(['table', 'treetable', 'util'], function() {
			var $ = layui.$,
				table = layui.table,
				util = layui.util,
				treetable = layui.treetable;
			//初始化渲染表格
			// var datas = getTableDatas(0);
			var tableIns = table.render({
				elem: '#' + tableID,
				id: tableID,
				height: 'full-60',
				page: false,
				size: 'sm',
				limit: '1000',
				cols: [
					[{
						type: 'numbers'
					}, {
						field: 'name',
						title: '菜单名称',
						width: '20%',
						templet: function(d) {
							//渲染树形图标
							return treetable.renderNode(this, d);
						}
					}, {
						field: 'code',
						title: '菜单代码',
						width: '12%',
						edit: 'text',
						event: 'kk'
					}, {
						field: 'page',
						title: '关联页面'
					}, {
						field: 'valid',
						title: '启用标志',
						width: 120
					}]
				],
				data: [],
				done: function(res, data, curr) {
					//调用表格加载完成的方法
					treetable.done(res.data);
				}
			});
			//初始化加载表格数据
			treetable.render({
				id: tableID,
				load: function(node, render) {
					var pid = 0;
					if (node.level > 0) {
						pid = node.data.id;
					}
					render(getTableDatas(pid));
				}
			});
			/***************** 监听区 *******************/
			//监听行点击事件
			table.on('row(' + tableID + ')', function(obj) {
				//选中行高亮显示
				obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
			});
			//监听工具点击事件
			/***************** 事件区 *******************/
			var newID = 1000;
			util.event("lay-event", {
				add: function() {
					treetable.add({
						elem: tableID,
						tr: $('[lay-id="' + tableID + '"] .layui-table-main').find(".layui-table-click"),
						data: {
							id: newID++,
							name: 'testAdd'
						}
					});
				},
				del: function() {
					treetable.del({
						elem: tableID,
						index: $('[lay-id="' + tableID + '"] .layui-table-main').find(".layui-table-click").eq(0).data('index'),
						// onlyLeaf: true,//只能删除叶子节点

					});
				},
				expandAll: function() {
					treetable.expandAll(tableID, function() {
						console.log('加载成功！');
					});
				},
				foldAll: function() {
					treetable.foldAll(tableID);
				}
			});
		});
	</script>
	<script>
		//造测试数据，实际开发使用ajax从后台查询子数据
		var map = new Map();
		//一级
		var datas1 = [];
		for (var i = 1; i < 10; i++) {
			datas1.push({
				id: i,
				name: '一级菜单-' + i,
				parent: 0
			});
			//二级菜单
			var datas2 = [];
			for (var j = i * 10; j < i * 10 + 5; j++) {
				datas2.push({
					id: j,
					name: '二级菜单-' + j,
					parent: i
				});
				//三级菜单
				var datas3 = [];
				for (var k = j * 10; k < j * 10 + 9; k++) {
					datas3.push({
						id: k,
						name: '三级菜单-' + k,
						leaf: true,
						parent: j
					});
				}
				map.set(j, datas3);
			}
			map.set(i, datas2);
		}
		map.set(0, datas1);

		function getTableDatas(pid) {
			var $ = layui.$;
			var data = [];
			$.ajax({
				type: 'post',
				url: 'http://localhost:8081/getMenus',
				data: {
					node: pid
				},
				async: false,
				success: function(obj) {
					data = obj.data;
					$.each(data, function(index, item){
						item.leaf = item.leaf == 1;
					});
				}
			});
			return data;
			// return map.get(pid) || [];
		}
	</script>
</html>
1322207395
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layui树形表格
weixin_44542146的博客
05-09 1104
树形表格 使用到treetable树形表格，而treetable是第三方基于layui开发的所以要先引用layui的的文件。 treetable树形表格的效果图 2、引用treetable的路径。 layui.config({ //前面的文件名称路径 base: '${pageContext.request.contextPath}/statics/treetable/module/'}).extend({ //倒数最后一个文件名的路径以及插件treetable.js的路径 /...
LayUI含表格的TreeTable
04-27
若有网友，公司项目采用了layui框架做系统，涉及到 某些功能需要用到树形目录时(系统菜单多层级，折叠效果时)，这个完美解决
Layui树形表格treetable
12-13
实现layui的树形表格treeTable,在layui数据表格之上进行扩展实现,详细使用方法请参考压缩包中的README.md文件和实例.
layui 树形表格.rar
09-10
利用layui实现的树形表格，从后台获取list数据，解析成json，实现对数据的增删改查。这功能写了一周，花了不少功夫，希望可以帮到大家。
layui 树形表格 treeTable使用详细指南，不能折叠解决办法
最新发布
2401_85767310的博客
06-28 2497
主要功能有，树形表格展示，添加，修改，删除，批量删除，搜索，layui时间日期自定义格式列，表格全部展开、折叠、刷新表格等功能，有兴趣的看下吧~~商品分类管理批量删除添加
Layui的树形表格treeTable
06-20
Layui、treeTable、树形表格、无限层级
layui treeTable生成树形表格实例
09-04
使用layui库中的treeTable插件，生成树形表格效果，可展开，可关闭，绑定json数据。欢迎大家批评指正。
Layui实现TreeTable(树形数据表格)
RoyRaoHR的博客
10-21 1万+
参考 Layui实现TreeTable(树形数据表格) LayUI树形表格treetable使用详解 gitee：ele-admin / treetable-lay 开发背景 在开源项目看到layui-treetable实现的菜单配置，页面简洁，手上刚好又有个菜单页面可以进行优化（整活）。但是尽管已经有上面三个案例，因为和现业务并不是很匹配、treetable.js版本等原因，整合的过程还是有些波折。 优化结果： 原页面 treetable实现的页面 实现 下载引入treetable.js 我用的版本是
Layui树形表格.rar
06-11
其中，"Layui树形表格"是Layui框架中的一个特色组件，能够帮助开发者实现复杂的数据展示需求，比如层级结构的数据展示。本篇文章将深入探讨Layui树形表格的特性和使用方法。 首先，Layui树形表格结合了表格和树状...
基于layui实现树形穿梭框
05-22
2. layui树形穿梭框组件： 树形穿梭框是layui中的一个重要组件，它结合了树形结构和穿梭框两种元素，用户可以通过这个组件在两栏之间移动选中的节点，实现数据的双向选择。这在权限分配、角色配置或者多级分类选择...
layui 树形表格
贵林之恋的博客
07-03 4703
最近的一个项目，用layui里的表格要实现树形表格功能，去官网查找没有，最后在网上找了一位大神开发的插件—treeTable。 插件地址 演示地址：https://whvse.gitee.io/treetable-lay/ 项目地址：https://gitee.com/whvse/treetable-lay 使用方法按照文档介绍或者下载demo 自己在此基础上实现了功能，效果如下： ...
Layui树形表格
06-11 1968
简介 treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致， 支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。 演示地址：https://whvse.gitee.io/treetable-lay/ 参考了作者的示例，进行了一些改造。 前端代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCT
layui树形表格treetable.css
04-29
layui树形表格treetable.css插件，基于layui第三方开发的一款树形表格插件，很实用。
layui组件之树形下拉框
04-22
layui组件之树形下拉框例子，看完你就会写下拉树了。不过同时还需要下载ztree的相关js和style 不过压缩包里都有呢！希望对大家有所帮助
layui dtree树形结构
03-15
layui dtree树形结构，点击文本框显示下拉树结构。
layui树形表格treetable
peppa_pig的博客
07-27 3578
treetable树形表格是基于LayUI开发的组件，所以需要先用Layui引入一下文件。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev.
LayUI树形表格treetable使用详解
热门推荐
小马同学
04-29 14万+
LayUI是现在比较流行的一款前端框架，也有很多人基于LayUI开发了很多不错的组件，比如treetable树形表格。因为treetable是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。 layui.config({ base : 'static/layui/' }).extend({ treetable : 'treetable-lay/treetab...
实现layui的树形表格treeTable
cnsu-cmh
08-18 1万+
实现layui的树形表格treeTable，layui中有 可以使用 'tree'，'table' , 进而使用layui.treeGird实现 layui.treeGird({ elem: '#demo', //传入元素选择器 nodes: data,//返回json数据，组装为tree结构 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值