• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

layui-tableTree: 使表格增加了树形结构展示的能力.完全依赖于layui的表格. 正因为如 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

layui-tableTree

开源软件地址:

https://gitee.com/dqb12315/layui-table-tree

开源软件介绍:

layui-tableTreeDj

先来个图片

效果图

介绍

使表格增加了树形结构展示的能力.完全依赖于layui的表格.正因为如此,您可以像使用表格组件一样使用该组件.layui的表格功能全都有.全都有.全都有.

全量版

注意:

  1. 本组件仅支持url方式获取数据.见谅.可以将数据放入另一个json文件.然后用url方式引入(url:'./data.json')
  2. 仓库有个ie分支.没有使用es6的语法.兼容ie浏览器.
  3. 需要一次性查询出全部数据.至少上下级必须完整

组件引入方法请阅读 官方文档

https://www.layui.com/doc/base/modules.html#extend

方法

  • render(): 表格渲染.一般第一次显示调用.或者其他操作比如删除/添加等操作后也可以调用.第二次调用可以不传参数.如果传递参数会将上次参数覆盖.
  • reload(): 表格重载,内部调用了table.reload().一般用于搜索后显示数据.提交where条件给后端.
  • getTable(): 由于该组件内部使用了layui.table.如果想更细粒度的操作table.可以使用此方法获取table对象
  • 其他方法: 请阅读源码,只要方法名不以下划线开头都可以使用.如果需要的话.

参数

参数名称必填默认值含义
keyIdid数据主键
keyPidpid父级ID字段名称
titlename用于点击触发展开折叠的字段
indent   缩进字符
icon.openlayui-icon layui-icon-triangle-d展开时候的图标
icon.closelayui-icon layui-icon-triangle-r折叠时候的图标
showCachefalse折叠状态是否缓存,可传字符串.表示缓存的key.缓存记录的位置为 localStorage
sortasc排序方式,只支持小写
defaultShowfalse是否默认全部展开,优先级低于 showCache 字段

代码示例

layui.use(['tableTreeDj'], function() {        const tableTree = layui.tableTreeDj;        const $ = layui.$;        // 与 layui.table 的参数完全一致,内部本来就是把这些参数传递给table模块的        const objTable = {            elem: '#test'            ,url: "./getData"            ,cols: [[                {field:'name', title:'名称' },                {field:'id', title:'ID' },                {field:'pid', title:'上级ID' },                {field:'level', title:'层级' },                {field:'agent_id', title:'代理ID' },            ]]            ,id:'list'        }        // 本组件用到的参数, 组件内部有默认值,与此一致,因此您可以只声明不一致的配置项        const config = {            keyId: "id" // 当前ID            , keyPid: "pid" // 上级ID            , title: "name" // 标题名称字段,此字段td用于绑定单击折叠展开功能            , indent: '    ' // 子级td的缩进.可以是其他字符            // 图标            , icon: {                open: 'layui-icon layui-icon-triangle-d', // 展开时候图标                close: 'layui-icon layui-icon-triangle-r', // 折叠时候图标            }            , showCache: true //是否开启展开折叠缓存,默认不开启.        };        // 渲染         tableTree.render(objTable, config);        // 其他一系列操作后.重新渲染表格,此时可以不传递参数.内部记录了上次传入的参数.        tableTree.render();                // 点击搜索按钮后重载数据.此时可以传入where条件.obj参数与官方表格一致.        obj = {where:{id: 1}};        tableTree.reload(obj);    });

懒加载版

注意

  1. 只支持 自动渲染方式.
  2. 支持懒加载.在点击展开时候通过ajax获取数据.折叠时候.为了保证浏览器速度,删除折叠的数据.

配置参数

参数名称必填默认值含义
tabkeKeydemo表格 lay-filter 属性
fieldIdidID字段的名称
fieldClickusername用于点击触发展开折叠的名称
reqUrl请求的url地址,其他参数可拼接到url中
reqKeypid请求的key
reqVal0请求的值
indent      缩进
icon.openlayui-icon layui-icon-triangle-d展开时候的图标
icon.closelayui-icon layui-icon-triangle-d折叠时候的图标

代码示例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../../../layui/src/css/layui.css" media="all">    <script type="text/javascript" src="../../../layui/src/layui.js"></script></head><body><script type="text/html" id="toolbarDemo">    <div class="layui-btn-container">        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>    </div></script><table style="display: none" lay-filter="demo" id="demo">    <thead>    <tr>        <th lay-data="{field:'id', width:100}">ID</th>        <th lay-data="{field:'pid', width:100}">PID</th>        <th lay-data="{field:'username', width:500}">昵称</th>        <th lay-data="{field:'age', width:80, sort:true}">年龄</th>        <th lay-data="{field:'sign'}">签名</th>        <th lay-data="{toolbar: '#toolbarDemo'}">操作</th>    </tr>    </thead>    <tbody>    </tbody></table><div id="page"></div><script type="text/javascript">    layui.config({        base: '../../../layui_exts/tableTreeDj/'    });    layui.use(['table','tableTreeRemoteDj'], function() {        const table = layui.table        const tableTree = layui.tableTreeRemoteDj;        const $ = layui.$;        const tableKey = 'demo'        // 表格配置        const objTable = {            height:500            , limit: 10000        }        // 组件配置        const objTree = {            tableKey: 'demo'            ,fieldId: 'id'            ,fieldClick: 'username'            ,reqUrl: './getData.php'            ,reqKey: 'pid'            ,reqVal: 0        }        tableTree.render(objTable, objTree)    });</script></body></html>

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap