Layui的TreeTable使用

Layui官方本身是没有TreeTable的,不过有个大佬自己写了一个,这是码云地址:https://gitee.com/whvse/treetable-lay/tree/master/

接下来我来说一下具体使用这个东西

首先下载这个文件夹中的东西

在你的web项目下将这个文件夹弄到里面去,在页面上导入这些文件

    <link rel="stylesheet" href="assets/layui/css/layui.css"><link rel="stylesheet" href="assets/common.css"/><script src="layui/layui.js"></script>

将下面这些代码放入你的body中

<div class="layui-container"><br> <br><!--     <a class="layui-btn layui-btn-normal" href="index.html">&lt;&lt;返回</a> -->&nbsp;&nbsp;<div class="layui-btn-group"><button class="layui-btn" id="btn-expand">全部展开</button><button class="layui-btn" id="btn-fold">全部折叠</button></div><table id="auth-table" class="layui-table" lay-filter="auth-table"></table></div>

这是符合该treetable的json格式

{"code": 0,"msg": "","count": 19,"data": [{"authorityId": 1,"authorityName": "系统管理","orderNumber": 1,"menuUrl": null,"menuIcon": "layui-icon-set","createTime": "2018/06/29 11:05:41","authority": null,"checked": 0,"updateTime": "2018/07/13 09:13:42","isMenu": 0,"parentId": -1},{"authorityId": 2,"authorityName": "用户管理","orderNumber": 2,"menuUrl": "system/user","menuIcon": null,"createTime": "2018/06/29 11:05:41","authority": null,"checked": 0,"updateTime": "2018/07/13 09:13:42","isMenu": 0,"parentId": 1},{"authorityId": 3,"authorityName": "查询用户","orderNumber": 3,"menuUrl": "","menuIcon": "","createTime": "2018/07/21 13:54:16","authority": "user:view","checked": 0,"updateTime": "2018/07/21 13:54:16","isMenu": 1,"parentId": 2},{"authorityId": 4,"authorityName": "添加用户","orderNumber": 4,"menuUrl": null,"menuIcon": null,"createTime": "2018/06/29 11:05:41","authority": "user:add","checked": 0,"updateTime": "2018/07/13 09:13:42","isMenu": 1,"parentId": 2},{"authorityId": 5,"authorityName": "修改用户","orderNumber": 5,"menuUrl": null,"menuIcon": null,"createTime": "2018/06/29 11:05:41","authority": "user:edit","checked": 0,"updateTime": "2018/07/13 09:13:42","isMenu": 1,"parentId": 2},{"authorityId": 6,"authorityName": "删除用户","orderNumber": 6,"menuUrl": null,"menuIcon": null,"createTime": "2018/06/29 11:05:41","authority": "user:delete","checked": 0,"updateTime": "2018/07/13 09:13:42","isMenu": 1,"parentId": 2},{"authorityId": 7,"authorityName": "角色管理","orderNumber": 7,"menuUrl": "system/role","menuIcon": null,"createTime": "2018/06/29 11:05:41","authority": null,"checked": 0,"updateTime": "2018/07/13 09:13:42","isMenu": 0,"parentId": 1},{"authorityId": 8,"authorityName": "查询角色","orderNumber": 8,"menuUrl": "","menuIcon": "","createTime": "2018/07/21 13:54:59","authority": "role:view","checked": 0,"updateTime": "2018/07/21 13:54:58","isMenu": 1,"parentId": 7},{"authorityId": 9,"authorityName": "添加角色","orderNumber": 9,"menuUrl": "","menuIcon": "","createTime": "2018/06/29 11:05:41","authority": "role:add","checked": 0,"updateTime": "2018/07/13 09:13:42","isMenu": 1,"parentId": 7},{"authorityId": 10,"authorityName": "修改角色","orderNumber": 10,"menuUrl": "","menuIcon": "","createTime": "2018/06/29 11:05:41","authority": "role:edit","checked": 0,"updateTime": "2018/07/13 09:13:42","isMenu": 1,"parentId": 7},{"authorityId": 11,"authorityName": "删除角色","orderNumber": 11,"menuUrl": "","menuIcon": "","createTime": "2018/06/29 11:05:41","authority": "role:delete","checked": 0,"updateTime": "2018/07/13 09:13:42","isMenu": 1,"parentId": 7},{"authorityId": 12,"authorityName": "角色权限管理","orderNumber": 12,"menuUrl": "","menuIcon": "","createTime": "2018/06/29 11:05:41","authority": "role:auth","checked": 0,"updateTime": "2018/07/13 15:27:18","isMenu": 1,"parentId": 7},{"authorityId": 13,"authorityName": "权限管理","orderNumber": 13,"menuUrl": "system/authorities","menuIcon": null,"createTime": "2018/06/29 11:05:41","authority": null,"checked": 0,"updateTime": "2018/07/13 15:45:13","isMenu": 0,"parentId": 1},{"authorityId": 14,"authorityName": "查询权限","orderNumber": 14,"menuUrl": "","menuIcon": "","createTime": "2018/07/21 13:55:57","authority": "authorities:view","checked": 0,"updateTime": "2018/07/21 13:55:56","isMenu": 1,"parentId": 13},{"authorityId": 15,"authorityName": "添加权限","orderNumber": 15,"menuUrl": "","menuIcon": "","createTime": "2018/06/29 11:05:41","authority": "authorities:add","checked": 0,"updateTime": "2018/06/29 11:05:41","isMenu": 1,"parentId": 13},{"authorityId": 16,"authorityName": "修改权限","orderNumber": 16,"menuUrl": "","menuIcon": "","createTime": "2018/07/13 09:13:42","authority": "authorities:edit","checked": 0,"updateTime": "2018/07/13 09:13:42","isMenu": 1,"parentId": 13},{"authorityId": 17,"authorityName": "删除权限","orderNumber": 17,"menuUrl": "","menuIcon": "","createTime": "2018/06/29 11:05:41","authority": "authorities:delete","checked": 0,"updateTime": "2018/06/29 11:05:41","isMenu": 1,"parentId": 13},{"authorityId": 18,"authorityName": "登录日志","orderNumber": 18,"menuUrl": "system/loginRecord","menuIcon": null,"createTime": "2018/06/29 11:05:41","authority": null,"checked": 0,"updateTime": "2018/06/29 11:05:41","isMenu": 0,"parentId": 1},{"authorityId": 19,"authorityName": "查询登录日志","orderNumber": 19,"menuUrl": "","menuIcon": "","createTime": "2018/07/21 13:56:43","authority": "loginRecord:view","checked": 0,"updateTime": "2018/07/21 13:56:43","isMenu": 1,"parentId": 18}]
}

下面是使用这个组件的js

layui.config({base : 'module/'
}).extend({treetable : 'treetable-lay/treetable'
}).use([ 'table', 'treetable' ], function() {var $ = layui.jquery;var table = layui.table;var treetable = layui.treetable;// 渲染表格
var renderTable=   function(){layer.load(2);treetable.render({treeColIndex : 1,treeSpid : -1,treeIdName : 'Menuid',//自身的idtreePidName : 'parentid',//父节点的idelem : '#auth-table',data : databind(),//这里可以去看文档,可以用url,也可以直接使用json字符串page : false,//不可分页cols : [ [ {//表头格式type : 'numbers'}, {field : 'name',//对于的json字符的键minWidth : 200,//宽度title : '权限名称'}, {field : 'Authid',title : '权限标识'}, {field : 'href',title : '菜单url'},// {field: 'orderNumber', width: 80, align: 'center', title: '排序号'},// {// field: 'isMenu', width: 80, align: 'center', templet: function (d) {// if (d.isMenu == 1) {// return '<span class="layui-badge layui-bg-gray">按钮</span>';// }// if (d.parentId == -1) {// return '<span class="layui-badge layui-bg-blue">目录</span>';// } else {// return '<span class="layui-badge-rim">菜单</span>';// }// }, title: '类型'// },{field : 'mark',title : '备注'}, {templet : '#auth-state',width : 220,align : 'center',title : '操作'} ] ],done : function() {layer.closeAll('loading');},
// di:testReload,});}
renderTable();$('#btn-expand').click(function() {treetable.expandAll('#auth-table');});$('#btn-fold').click(function() {treetable.foldAll('#auth-table');});

其中提供了两个方法,一个是全部展开,和全部关闭,方法在文档中有,这是这个组件的demo示例:https://whvse.gitee.io/treetable-lay/index.html

这是简单的使用,详情大家可以去看文章开头的码云地址,有文档说明,有什么问题或者是交流可以在下方评论

Layui的TreeTable使用相关推荐

JAVA_树状表格分页(layUI、treeTable.js)
效果图展示(PS:本人很懒,刚开始想在网上随意找一个就用,后来发现好像PHP的不少,JAVA的树状表格大多数跟我开始写的一样没有分页,导致数据量过大后加载过于缓慢被客户吐糟,最后没找到合适的就自己写了 ...
Layui实现TreeTable(树形数据表格)
参考 Layui实现TreeTable(树形数据表格) LayUI树形表格treetable使用详解 gitee:ele-admin / treetable-lay 文中涉及的treetable.js ...
layui的treetable
实现layui的树形表格treeTable,对layui数据表格进行扩展. 效果展示 layui树形菜单写的树形列表(treetable) <script>layui.config({ba ...
LayUI treetable树形表格的实现，数据格式正确，不显示的解决方案和在这个过程中遇到的坑~ 认真看你会得到一些想要的答案。
先给大家看下效果吧! 我这边只是针对数据显示的问题做了解释.并没有增删改查.找增删改查的同学可以不用看了. 做出这样的效果,首先我们要借用LayUI的内置插件,treetable.js 网上有很多,之 ...
layui树形表格（treetable）列数据合计
项目中遇到的问题,按要求对后台数据以树形列表(使用layui的第三方扩展组件,使用方法自行百度)展示之后.又来了新的需求,需要对展开后的子列表进行统计并将结果显示到父级列表.百度了半天没找到相关的示例 ...
bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）...
概述后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件. 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加 ...
Layui树形表格组件的实现
效果图: 一.Layui树形组件:treetable.js 可在layui下创建一个文件夹保存组件的js代码,以便引用. // 基于layui table的树形表格实现,只支持页面仅有一个表格的情况 ...
【算法图文动画详解系列】QuickSort 快速排序算法
快排简介快速排序(Quicksort)是对冒泡排序算法的一种改进. 快速排序由C. A. R. Hoare在1960年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的 ...
lay-treeTable开发文档
简介 Layui的树形表格treeTable,支持异步加载(懒加载).复选框联动.折叠状态记忆. 演示地址:https://whvse.gitee.io/treetable-lay/ 更新日志不定期 ...
layui树形菜单右键_layui树形菜单写的树形列表（treetable）
基于layui v2.2.5的 layui-tree写了一个treetable(树形列表) 效果 1.1 收起效果图 1.2 展开效果图 1.开发预备首先需要到layui官网https://www. ...

Layui的TreeTable使用

Layui的TreeTable使用相关推荐

最新文章

热门文章