LAYUI 树形表格（tree table）

属性表格，主要是引入了下面的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: '__ADMIN__/js/'
}).use(['layer', 'util', 'form', 'treeTable'], function () {var $ = layui.jquery;var layer = layui.layer;var util = layui.util;var form = layui.form;var treeTable = layui.treeTable;$('body').removeClass('layui-hide');// 渲染表格treeTable.render({// table的IDelem: '#layui_table',// 是否显示工具栏toolbar: false,// 容器高度height: 'full-200',tree: {// 展开和合并的图标在哪一列iconIndex: 0,// 是否是pid形式的数据，懒加载方式不需要isPidData: true,idName: 'id',pidName: 'parentId',// 图标设置getIcon: ''},// 表头设置cols: [[{ field: 'list_name', title: '列表名称', minWidth: 165 },{ field: 'list_level', title: '列表等级' },{ field: 'sort', title: '排序', width: 110, align: 'center' },{ align: 'center', toolbar: '#displayBar', title: '显示', width: 110 },{ align: 'center', toolbar: '#tbBar', title: '操作', width: 230 }]],reqData: function (data, callback) {  // 懒加载也可以用url方式，这里用reqData方式演示var url = '请求的地址';$.get(url, function (res) {callback(res.data);});},style: 'margin-top:15px;'});
})

LAYUI 树形表格（tree table）相关推荐

Layui树形表格组件的实现
效果图: 一.Layui树形组件:treetable.js 可在layui下创建一个文件夹保存组件的js代码,以便引用. // 基于layui table的树形表格实现,只支持页面仅有一个表格的情况 ...
layui树形表格（treetable）列数据合计
项目中遇到的问题,按要求对后台数据以树形列表(使用layui的第三方扩展组件,使用方法自行百度)展示之后.又来了新的需求,需要对展开后的子列表进行统计并将结果显示到父级列表.百度了半天没找到相关的示例 ...
layui 树形表格
最近的一个项目,用layui里的表格要实现树形表格功能,去官网查找没有,最后在网上找了一位大神开发的插件-treeTable. 插件地址演示地址: https://whvse.gitee.io/tr ...
LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,我自己修改了下最新源码tree.js,简单粗暴的方式支持懒加载模式.(Ps:最新更新 ...
来了老弟，Layui树形菜单tree
咳咳,大家都叫我万恶的小编. 关于树形菜单这方面layui也是有着一个独立的模块(Tree)的.之前貌似是把这个模块给下下去了的(至于为啥的话小编也就不知道了),在2.5版本的时候才被作者贤心给重新加 ...
[Layui]JS实现Layui树形表格treetable演示下载
地址: 添加链接描述后面写一篇完整的前后端处理DEMO
layui树形懒加载_layui树形表格支持非异步和异步加载
layui树形表格支持非异步和异步加载. 使用示例如下: 展开全部展开一层折叠全部折叠一层 layui.config({ base: '/uui/treetable-lay/module/' } ...
不容错过的精美的树形表格treegrid在项目里面使用总结
一问题描述: 树形表格TreeGrid在日常项目中还是运用的比较多的,哪究竟都在什么地方使用呢? 二使用场景 TreeGrid它具体使用在什么地方? 首页您要用TreeGrid,肯定是它的特点满足 ...
Tree Table 树形表格
1.安装 npm i vue-table-with-tree-grid -S 2.配置在main.js文件内配置 import TreeTable from 'vue-table-with-tree ...
实现layui的树形表格treeTable
实现layui的树形表格treeTable,layui中有可以使用 'tree','table' , 进而使用layui.treeGird实现 layui.treeGird({elem: '#dem ...

LAYUI 树形表格（tree table）

LAYUI 树形表格（tree table）相关推荐

最新文章

热门文章