layui树形表格的使用

最新推荐文章于 2024-07-17 16:58:56 发布
最新推荐文章于 2024-07-17 16:58:56 发布
阅读量1.3k 收藏 6
点赞数
分类专栏： 笔记 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47400722/article/details/117215406
版权
这篇博客介绍了layui的treetable树形表格使用，包括如何调用treeTable.js，提供了前端html和js代码示例，详细步骤助你快速上手。
摘要由CSDN通过智能技术生成

layui的treetable树形表格使用

前言

layui的树状结构结合表格使用。
主要是调用了第三方treeTable.js文件
百度网盘连接
链接: https://pan.baidu.com/s/1-SZbyhP6aWe5shz5GyJJmA 提取码: uip6

提示：本文章借鉴该网址的博主写出来的，也可参考https://www.cnblogs.com/Chen-Ru/p/14176723.html，以下是本篇文章正文内容，下面案例仅供参考

一、正文

1.粗略展示，有待开发

在这里插入图片描述

在这里插入图片描述

只是简单的开发一下，方便以后使用
只是简单的开发一下，方便以后使用

二、使用步骤

1.前台body里面的html

代码如下（示例）：

	<body>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body ">
							<input class="layui-input Modules/find" id="edtSearch" value="" placeholder="输入关键字"
								style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;" />
							<div class="layui-btn-container" style="display: inline-block;">
								<button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary Modules/find">
									<i class="layui-icon">&#xe615;</i>搜索
								</button>
								<button id="btnClearSearch"
									class="layui-btn layui-btn-sm layui-btn-primary Modules/find">
									<i class="layui-icon">&#x1006;</i>清除搜索
								</button>
								<div class="layui-inline layui-show-xs-block Modules/add">
									<button id="addOneModel" style="display: ;"
										class="layui-btn layui-btn-sm layui-btn-primary Modules/add">
										<i class="layui-icon">&#xe654;</i>添加一级模块
									</button>
								</div>
							</div>
							<div class="page-wrapper Modules/find">
								<table id="demoTreeTable1"></table>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

		<!--新增节点/修改节点  -->
		<div class="layui-card-body" style="display: none;" id="addEditModulesNone">
			<div class="layui-row" id="ModulesX">
				<form class="layui-form layui-col-space5" onsubmit="return false" id="ModulesFrom"
					lay-filter="ModulesFrom" name="ModulesFrom">
					<div class="layui-form-item" style="display: none">
						<label for="watchCatId" class="layui-form-label">模块编号</label>
						<div class="layui-inline layui-show-xs-block">
							<input size="28" type="text" value="0" id="id" name="id" placeholder="模块编号"
								autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label for="watchCatId" class="layui-form-label">父模块</label>
						<div class="layui-inline layui-show-xs-block">
							<input size="28" style="display: none;" readonly=
最低0.47元/天 解锁文章
￥懒人～
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui树形表格
weixin_44542146的博客
05-09 1131
树形表格 使用到treetable树形表格，而treetable是第三方基于layui开发的所以要先引用layui的的文件。 treetable树形表格的效果图 2、引用treetable的路径。 layui.config({ //前面的文件名称路径 base: '${pageContext.request.contextPath}/statics/treetable/module/'}).extend({ //倒数最后一个文件名的路径以及插件treetable.js的路径 /...
layui的树形表格
阳某的博客
07-19 6640
layui树形表格treetable treetable文件下载地址：https://github.com/whvcse/treetable-lay 下载好把treetable-lay引入你的项目 目前官方还没有提供treetable的API文档 使用方法 首先要引入我们下载的模板文件,base你是最大的目录文件treetable是你js文件所在 比如我的 layui.config({ ...
Layui树形表格treetable
12-13
实现layui的树形表格treeTable,在layui数据表格之上进行扩展实现,详细使用方法请参考压缩包中的README.md文件和实例.
layui 树形表格.rar
09-10
利用layui实现的树形表格，从后台获取list数据，解析成json，实现对数据的增删改查。这功能写了一周，花了不少功夫，希望可以帮到大家。
layui 2.9版本自带treeTable插件但是无法加载出子级 解决
最新发布
JKPurpleV的博客
07-17 265
2.8以下的可以使用treetable-lay插件，使用layui 2.8以上的版本则已经内嵌插件，不可以再额外加载插件。原理：数据格式要求严格，回传的数据有四个key必须完全一致，大小写也要一致。2.isParent：是否是父级：是：true；1.children：子级数据，就是每个父级下应该有的内容。4.parentId：父节点，子级必填。3.name：点击的内容。
Layui树形表格
06-11 1991
简介 treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致， 支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。 演示地址：https://whvse.gitee.io/treetable-lay/ 参考了作者的示例，进行了一些改造。 前端代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCT
Layui的树形表格treeTable
06-20
在Layui中，树形表格（treeTable）是一种非常实用的功能，它将传统的表格与树状结构相结合，适用于展示具有层级关系的数据，如部门结构、文件目录等。下面我们将深入探讨Layui的treeTable，以及如何实现无限层级的树...
Layui树形表格.rar
06-11
本篇文章将深入探讨Layui树形表格的特性和使用方法。 首先，Layui树形表格结合了表格和树状结构的优点，使得在单一的视图中可以清晰地展示具有层次关系的数据。它继承了Layui数据表格的大部分功能，如分页、排序、...
Layui实现TreeTable(树形数据表格)
RoyRaoHR的博客
10-21 1万+
参考 Layui实现TreeTable(树形数据表格) LayUI树形表格treetable使用详解 gitee：ele-admin / treetable-lay 开发背景 在开源项目看到layui-treetable实现的菜单配置，页面简洁，手上刚好又有个菜单页面可以进行优化（整活）。但是尽管已经有上面三个案例，因为和现业务并不是很匹配、treetable.js版本等原因，整合的过程还是有些波折。 优化结果： 原页面 treetable实现的页面 实现 下载引入treetable.js 我用的版本是
layui 树形表格
贵林之恋的博客
07-03 4711
最近的一个项目，用layui里的表格要实现树形表格功能，去官网查找没有，最后在网上找了一位大神开发的插件—treeTable。 插件地址 演示地址：https://whvse.gitee.io/treetable-lay/ 项目地址：https://gitee.com/whvse/treetable-lay 使用方法按照文档介绍或者下载demo 自己在此基础上实现了功能，效果如下： ...
LayUI含表格的TreeTable
04-27
若有网友，公司项目采用了layui框架做系统，涉及到 某些功能需要用到树形目录时(系统菜单多层级，折叠效果时)，这个完美解决
layui treeTable生成树形表格实例
09-04
使用layui库中的treeTable插件，生成树形表格效果，可展开，可关闭，绑定json数据。欢迎大家批评指正。
layui树形表格treetable.css
04-29
layui树形表格treetable.css插件，基于layui第三方开发的一款树形表格插件，很实用。
layui树型可折叠表格.zip
05-26
可以在这里查看下是否需要:https://truedei.blog.csdn.net/article/details/106347226 有详细的介绍. 包括: 1:Layui树型结构和表格相结合的实例 2:自定义表格图表的实例 3:菜单管理的实例 4:多表格的实例 5:搜索的实例 6:等
LayUI树形表格treetable使用详解
热门推荐
小马同学
04-29 14万+
LayUI是现在比较流行的一款前端框架，也有很多人基于LayUI开发了很多不错的组件，比如treetable树形表格。因为treetable是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。 layui.config({ base : 'static/layui/' }).extend({ treetable : 'treetable-lay/treetab...
LAYUI 树形表格（tree table）
qq_17627195的博客
12-22 2668
属性表格，主要是引入了下面的JS，文档里面也很详细 下载地址：https://gitee.com/whvse/treetable-lay 案例地址：https://whvse.gitee.io/treetable-lay/demo/ 文档地址：https://gitee.com/whvse/treetable-lay/wikis/pages 先上一张效果图吧 下面贴一下代码： // 记得引入LAYUI layui.config({ // treeTable.js 的根目录 base: '_
layui 树形表格 treeTable使用详细指南，不能折叠解决办法
Java开发，人工智能，边缘计算，致力于掌握前沿技术
09-25 1万+
最近在写一个商品分类管理的功能，本来想用layui的树形组件来写，但发现layui原生的tree只能展示title，而分类的其他字段无法展示，这就有点不适用了，无意中看到一位大神自定义写的一个树形表格组件，正好满足我的要求，特此将使用方法以及其中遇到的一些坑记录下来。。。 首先看下treeTable的 演示地址 项目地址 好了，如果看完演示到这里你觉得正好符合你的功能要求，就可以继续往下看了， 虽...
layui树形表格treetable
peppa_pig的博客
07-27 3598
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.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值