知识分类
后端
前端
设计
开源组件/产品
APP
其他
广告招募

Layui 树形表格(treetable)常用的使用知识点

管理员
发布于:2024-02-18 23:22:32

layui的树表组件 treeTable 是基于 table 组件延伸的树形表格组件,支持常见的树组件功能。

下面主要介绍使用该组件时经常用到的知识点:

1.什么是简单数据,如何使用

isSimpleData 是 layui 的 treetable 模块中的一个参数,用于指定数据是否为简单数据。简单数据一般是指每条数据只有 id 和 parentId 两个字段,没有 children 字段。

如果你的数据就是简单数据,你可以将 isSimpleData 设置为 true。如果你的数据是树形结构数据,你应该将 isSimpleData 设置为 false。

2.设置父级字段

组件默认的父级字段默认为parentId,可以通过配置修改pid:修改成你想要的.

3.默认全部展开

配置expandAllDefault为true即可(layui2.8.7+以上有效)

具体配置看如下代码:

var inst = treeTable.render({
            elem: '#department-treeTable',
            tree: {
                customName: {
                     pid:pid
                },
                data: {
                    isSimpleData: true
                },
                view: {
                    expandAllDefault: true
                }
            },
            data: [{
                id: 1,
                name: '张三',
                parentId: 0,

            }, {
                id: 2,
                name: '李四',
                parentId: 1
            }],
            cols: [
                [


                    {
                        field: 'id',
                        title: 'ID',
                        width: 80,
                        fixed: 'left'
                    },

                    {
                        field: 'name',
                        title: '部门名称',
                        fixed: 'left'
                    },


                    {
                        fixed: "right",
                        title: "操作",
                        width: 190,
                        align: "center",
                        toolbar: "#TPL-treeTable-demo-tools"
                    }

                ]
            ],

            page: false

        });
上一篇:uniapp picker组件绑定的是对象数组应该怎么处理?
下一篇:vscode用一个插件快速生成Vue3模板
搜索内容
最新文章
  • 什么是GEO生成式引擎优化?和SEO
  • 如何保证文件上传安全?
  • Go语言时间格式为什么和其他语言不一
  • 软件许可协议有哪些?之间的区别是什么
  • FrameCoder非可站群框架支持
  • git忽略文件.gitignore,
  • 什么AI模型上下文协议(MCP)?M
  • 为什么有些页面的图片看不见?可能是被
  • 什么是AI智能体?AI智能体能做什么
  • 国内AI大模型有哪些?各模型间对比如
精彩文章
  • 1 MSYS2中安装使用GCC的正确方法
  • 2 Layui 怎么样更换主题颜色?
  • 3 vscode用一个插件快速生成Vue
  • 4 连接WIFI出现无Internet
  • 5 FrameCoder非可,基于web
  • 6 3步教你如何修改uniapp but
  • 7 JavaScript 判断对象是否为
  • 8 什么是PHP站群以及使用php开源框
  • 9 OBS在银河麒麟或ubuntu等核心
  • 10 小程序真机调试 报错 define
工信部备案:苏ICP备2023011827号-1
苏公网安备 32111202000338号