layui 树形表格

最近的一个项目，用layui里的表格要实现树形表格功能，去官网查找没有，最后在网上找了一位大神开发的插件—treeTable。

插件地址

演示地址： https://whvse.gitee.io/treetable-lay/

项目地址：https://gitee.com/whvse/treetable-lay

使用方法按照文档介绍或者下载demo

自己在此基础上实现了功能，效果如下：

html文件

<table id="layuiTable" lay-filter="test"></table>

js文件

layui.config({base: '../../plugins/'
}).extend({treetable: 'treetable-lay/treetable'
}).use(['layer', 'table', 'treetable'], function() {var $ = layui.jquery;var table = layui.table;var layer = layui.layer;var treetable = layui.treetable;// 渲染表格renderTable = function() {layer.load(2);treetable.render({treeColIndex: 2,treeSpid: 0,treeIdName: 'deptId',treePidName: 'parentId',treeDefaultClose: true,treeLinkage: false,elem: '#layuiTable',id: 'tableId',url: baseURL + "sys/dept/list",page: false,cols: [[{type: 'radio'},{field: 'deptId',title: '部门ID'},{field: 'name',title: '部门名称'},{field: 'parentName',title: '上级部门'},{field: 'parentId',title: 'parentId'},{field: 'orderNum',title: '排序号'}]],done: function() {layer.closeAll('loading');}});};renderTable();//监听行单击事件（双击事件为：rowDouble）table.on('row(test)', function(obj) { //注：test是table原始容器的属性 lay-filter="对应的值"var data = obj.data;selected = data;//选中行样式obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');//选中radio样式obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");});});var renderTable;
var selected;

layui 树形表格相关推荐

Layui树形表格组件的实现
效果图: 一.Layui树形组件:treetable.js 可在layui下创建一个文件夹保存组件的js代码,以便引用. // 基于layui table的树形表格实现,只支持页面仅有一个表格的情况 ...
layui树形表格（treetable）列数据合计
项目中遇到的问题,按要求对后台数据以树形列表(使用layui的第三方扩展组件,使用方法自行百度)展示之后.又来了新的需求,需要对展开后的子列表进行统计并将结果显示到父级列表.百度了半天没找到相关的示例 ...
[Layui]JS实现Layui树形表格treetable演示下载
地址: 添加链接描述后面写一篇完整的前后端处理DEMO
layui树形懒加载_layui树形表格支持非异步和异步加载
layui树形表格支持非异步和异步加载. 使用示例如下: 展开全部展开一层折叠全部折叠一层 layui.config({ base: '/uui/treetable-lay/module/' } ...
LayUI treetable树形表格的实现，数据格式正确，不显示的解决方案和在这个过程中遇到的坑~ 认真看你会得到一些想要的答案。
先给大家看下效果吧! 我这边只是针对数据显示的问题做了解释.并没有增删改查.找增删改查的同学可以不用看了. 做出这样的效果,首先我们要借用LayUI的内置插件,treetable.js 网上有很多,之 ...
实现layui的树形表格treeTable
实现layui的树形表格treeTable,layui中有可以使用 'tree','table' , 进而使用layui.treeGird实现 layui.treeGird({elem: '#dem ...
bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）...
概述后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件. 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加 ...
在layui中使用ajax传值给后台,浅谈layui 数据表格前后台传值的问题
1.1查询 layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : ...
解决Layui数据表格无数据最后列被顶出去的问题
解决Layui数据表格无数据最后列被顶出去的问题参考文章: (1)解决Layui数据表格无数据最后列被顶出去的问题 (2)https://www.cnblogs.com/Caoxdong/p/963 ...

layui 树形表格

插件地址

使用方法按照文档介绍或者下载demo

layui 树形表格相关推荐

最新文章

热门文章