在layui中使用treetable.js插件
问题描述:
1、下载treetable.js插件。
https://gitee.com/whvse/treetable-lay.git
2、由于我们只用得到treetable.js和treetable.css这两个文件,所以我们要从下载的文件中找到这两个文件,然后新建 treetable-lay文件夹 用于存放这两个文件。如果是springboot项目,需将treetable-lay文件夹放在static文件夹下。
resource
|
|__static
| |__treetable-lay | |__treetable.js | |__treetable.css
3、在layui中使用treetable.js
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
<div class="menu-table"> <table class="layui-table" id="menuTable" lay-filter="menuTable"></table> </div>
<script>
// 存放拓展模块的根目录 layui.config({base: '/resource/static'}) // 继承treetable.js插件 .extend({treetable: 'treetable-lay/treetable'}) .use([ 'treetable','jquery'], function (){ var $ =layui.jquery;
var treetable = layui.treetable; /*从后端获取数据,注意:获取到的数据字段需要和treetable中的cols字段相同*/ $.ajax({ url: page, data:{"name":value}, success: function(res){ renderTable(res.data); } }); /*初始化表格:treeIdName对应的是后端的id字段,treePidName对应的是后端的pid字段*/ var renderTable = function(data) { // 渲染表格 treetable.render({ data: data, // 后台数据 treeColIndex: 1, // 树形图标显示在第几列 treeSpid: 0, // 最上级的父级id treeIdName: 'id', // id字段的名称 treePidName: 'pid', // pid字段的名称 treeDefaultClose: false, // 是否默认折叠 treeLinkage: false, // 父级展开时是否自动展开所有子级 elem: '#menuTable', // 表格id page: false, // 树形表格一般是没有分页的 cols: [ [ {type: 'numbers'}, {field: 'name', title: '菜单名称'}, {field: 'url', title: 'url'}, {field: 'method', title: '请求方式'}, {field: 'pidName', title: '父级名称'}, {field: 'orderNum', title: '排序'}, {field: 'perms', title: '资源标识'}, {field: 'code', title: '前后端分离按钮控制标识'}, {title:'操作',width:180} ] ] }); }; </script>