参考
Layui实现TreeTable(树形数据表格)
LayUI树形表格treetable使用详解
gitee：ele-admin / treetable-lay

文中涉及的treetable.js、页面代码都可以在这下载gitee代码下载，直接zip下载即可

开发背景

在开源项目看到layui-treetable实现的菜单配置，页面简洁，手上刚好又有个菜单页面可以进行优化（整活）。但是尽管已经有上面三个案例，因为和现业务并不是很匹配、treetable.js版本等原因，整合的过程还是有些波折。

优化结果：
原页面

treetable实现的页面

实现

下载引入treetable.js

我用的版本是没有css，只有一个treetable.js，引入可以参考 LayUI树形表格treetable使用详解开篇讲的方式。

使用

HTML页面主要代码

 <!-- 数据表格 -->
<table class="layui-table" id="menus-table" lay-filter="menus-table"></table><!-- 表格操作列 --><script type="text/html" id="menusState"><a class="layui-btn layui-btn-xs" lay-event="detail">详情</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a></script>

// 渲染表格var treemenu = {reload: function () {treetable.render({elem: '#menus-table',url: serviceBase + '/service/menuWork/list',// toolbar: 'default',height: 'full-200',method:'get',where: {name: $("#name").val()},tree: {iconIndex: 2,isPidData: true,idName: 'code',//父IDpidName: 'parentCode',//子IDopenName: 'open',// 是否默认展开的字段名//public bool open { get; set; }open字段是bool类型},// defaultToolbar: ['filter', 'print', 'exports'],cols: [[{type: 'numbers'},{field: 'code', title: '菜单代码', width: 100},{field: 'name', title: '名称', width: 250},{field: 'description', title: '描述', width: 200},{field: 'url', title: '菜单路由'},{field: 'perCode', title: '权限代码'},{field: 'icon', title: '图标', align: 'center', width: 100,templet:'<div><i class="layui-icon {{d.icon}}"></i></div>'},{field: 'seqNo', title: '顺序号', align: 'center', width: 110},{field: 'createTime', title: '创建时间', align: 'center', width: 200},{toolbar: '#menusState', width: 120, align: 'center', title: '操作'}]],style: 'margin-top:0;'});treetable.on('tool(menus-table)', function (obj) {var data = obj.data;var layEvent = obj.event;if (layEvent === 'detail') {layer.open({type: 2, //type2表示打开iframe层title: ['详情'],  //false表示不显示标题area: ['800px', '600px'],shade: 0.1, //是否显示遮罩层// shadeClose: true, //是否点击遮罩关闭id: "detail",  //设置id防止重复弹出moveType: 0, //拖拽模式0或者1content: kiteBase + "page/configure/menu_detail.html?" + $.param({code: data.code,icon: data.icon,})});} else if (layEvent === 'edit') {layer.open({type: 2, //type2表示打开iframe层title: ['新增配置'],  //false表示不显示标题area: ['800px', '700px'],shade: 0.1, //是否显示遮罩层// shadeClose: true, //是否点击遮罩关闭id: "edit1",  //设置id防止重复弹出moveType: 0, //拖拽模式0或者1content: kiteBase + "page/configure/menu_edit.html?" + $.param({code: data.code,icon: data.icon,})});}});form.render();}}layui.use(['layer', 'form', 'table', 'element', 'treeTable'], function () {var $ = layui.$;form = layui.form;layer = layui.layer;element = layui.element;menuPerTable = layui.table;treetable = layui.treeTable;treemenu.reload();menuPer.reload();})

接口请求的数据为：

注意点： treetable.js中需要修改相应的代码，下面是修改后跟我上面接口返回的type一致，原代码用的code去判断请求是否成功，数据用的是data，所以如果你数据用的是其它字段，这边的data也要改成你相应的字段

上面js部分代码主要改的就下面两个，改成和你自己的数据一致

idName: 'code',//父ID
pidName: 'parentCode',//子ID

Layui实现TreeTable(树形数据表格)相关推荐

大数据量树形数据表格展示, 虚拟表格,el-table, umy-ui, 表格懒加载
1. 出现的问题要展示树形数据表格,根据当前点击的表格行去请求新的数据并展示, 基于这种情况遇到以下问题 1). 当树形表格数据层级大于五级且数据量较多时, 浏览器崩溃 2). 当数据条数展示超出5 ...
【通俗易懂】vue-elementul实现树形数据表格，后台返回的扁平化数组进行树形结构转换处理
效果图需求是做一个这种的多层级表格,树形数据表格. 大家可能遇到的问题一种是不知道如何做这种多层级的表格一种是后台给自己返回的数据不是树形的,也就是没有子父级.全是一条条的扁平化数组.类似这样 ...
微信小程序自定义组件-树形数据表格（进阶版）
前言一.下载引用二.使用treegrid组件三.使用文档属性事件四.组件源码利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...
axios和layUI配合加载数据表格demo
为什么80%的码农都做不了架构师?>>> <?php /*** Created by PhpStorm.* User: martinby* Date: 2017/9/21 ...
layUI踩坑：数据表格的监听工具条，点击事件没有反应
<%--类别展示--%> <table class="layui-hide" id="test"></table><% ...
使用Layui制作的简单数据表格
目录 1.创建 2.后台编写 3.前端编写成果图: 1.创建整体模板来自Layui前端框架文档,可自行参考. 先使用MybatisPlusGenerator 自动生成实体类.mapper.serv ...
大数据量树形数据表格展示, umy-ui,
前端树形表格展示通过使用umyui组件参考umyui官网的一个基于 vue 的 PC 端表格UI库,解决万级数据渲染卡顿问题,过万数据点击全选卡顿等等问题. 博主也查阅过资料,也有使用过ele ...
layui templet格式化_layui数据表格日期如何格式化成2012-12-30这样的？
test 学生评优评先系统学生信息管理学生信息查询学生信息添加注册登录查看编辑删除 $(function () { layui.use("table", funct ...
layui 自定义request_layui中使用自定义数据格式对数据表格进行渲染
1.引入 2.页面代码编辑删除 layui.use('table', function(){ var table = layui.table; table.render({ elem: '[lay ...

Layui实现TreeTable(树形数据表格)

开发背景

实现

下载引入treetable.js

使用

Layui实现TreeTable(树形数据表格)相关推荐

最新文章

热门文章