layui的树形表格treetable

最新推荐文章于 2024-08-10 08:29:21 发布

Miss.lang

最新推荐文章于 2024-08-10 08:29:21 发布

阅读量1.1k

点赞数

分类专栏：前端学习笔记 layui

本文链接：https://blog.csdn.net/weixin_42118466/article/details/106103817

版权

本文记录了在项目中使用layui实现树形表格treetable的过程。由于layui官方文档未直接提供该功能，作者通过查阅资料和实践，最终成功实现。需要注意的是，作者使用的layui版本为2.4.5，低版本可能存在样式问题。文章提供了包含layui、treetable.js及示例代码的demo下载链接。

摘要由CSDN通过智能技术生成

前言

项目需要要做一个树形表格，项目用的技术框架是layui。去查看了文档，layui没有treeTable的相关内容，但是他的拓展里面有，感觉有点生硬。后面是百度看大牛们写的，自己跟着写的，觉得还是做个笔记好一点。注意：我用的layui的版本2.4.5，低版本的可能会使树形表格的样式会加载不全的。话不说多，当代码：

代码


<body>
	<div class="admin-main">
		<table class="layui-table layui-form" id="tree-table"></table>
	</div>
	<script type="text/javascript" src="./layui.js"></script>
	<script type="text/javascript">
		layui.config({
			base: 'js/', //存放treeTable.js的文件夹
		})
		layui.use(['treeTable', 'layer', 'code', 'form'], function () {

			var $ = layui.$,
				form = layui.form,
				layer = layui.layer,
				treeTable = layui.treeTable;

			function getList() {
				var info = {
					"pageSize": 15,
					"pageNumber": 1,
					"pMenuId": '',
					"searchValue": '',
				};
				api.url(info, function (res) { //	api.url 这个是我获取数据的接口
					if (res.status == 0) {
						layer.msg(res.msg);
					} else if (res.status == 1) {
                        // 处理后台数据，使他成为treeTable能够用的数据
						for (var i = 0; i < res.ResInfo.length; i++) {
							if (res.ResInfo[i].PMenuID) {
								res.ResInfo[i].PMenuID = res.ResInfo[i].PMen