layui树形表格treetable

最新推荐文章于 2024-06-28 03:45:22 发布

麻辣_水煮鱼

最新推荐文章于 2024-06-28 03:45:22 发布

阅读量3.5k

点赞数

分类专栏： JavaScript 文章标签： layui树形表格 treetable

原文链接：https://blog.csdn.net/qq_40205116/article/details/89672232

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

treetable树形表格是基于LayUI开发的组件，所以需要先用Layui引入一下文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>treetable</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="content">
    <table class="layui-hide" id="menu" lay-filter="menu"></table>
</div>
<script src="./jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript">

    layui.config({
        base: './layui/'    /* 修改为你module文件夹地址*/
    }).extend({
        treetable: 'treetable-lay/treetable'
    })
    layui.use(['treetable', 'table', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;
        //渲染表格
        var renderTable = function () {
            layer.load(2);  //加载层
            treetable.render({
                height: 'full-160',
                id: 'menu',
                treeColIndex: 0,	//树形图标显示在第几列
                treeSpid: '0',		//最上级的父级id
                treeIdName: 'id',	//id字段的名称
                treePidName: 'parentId',	//父级节点字段
                treeDefaultClose: false,	//是否默认折叠
                treeLinkage: false,		//父级展开时是否自动展开所有子级
                elem: '#menu',	//表格id
                data: [
                    {
                        "id": 1,
                        "name": "系统设置",
                        "url": "",
                        "icon": "",
                        "idx": 1.0,
                        "parentId": 0	//最上级节点，父节点为0
                    }, {
                        "id": 2,
                        "name": "角色管理",
                        "url": "",
                        "icon": "",
                        "idx": 1.0,
                        "parentId": 1		//上级节点
                    }, {
                        "id": 6,
                        "name": "数据表格",
                        "url": "",
                        "icon": "",
                        "idx": 1.0,
                        "parentId": 5
                    }, {
                        "id": 3,
                        "name": "部门管理",
                        "url": "",
                        "icon": "",
                        "idx": 2.0,
                        "parentId": 1
                    }, {
                        "id": 5,
                        "name": "表格案例",
                        "url": "",
                        "icon": "",
                        "idx": 2.0,
                        "parentId": 0
                    }, {
                        "id": 7,
                        "name": "树形表格",
                        "url": "",
                        "icon": "",
                        "idx": 2.0,
                        "parentId": 5
                    }
                ],
                page: false,
                cols: [
                    [
                        {align:'center',field: 'name', title: '省辖市排名',rowspan:2},
                        {align:'center',field: 'url', title: '下发情况',colspan:2},
                        {align:'center',field: 'icon', hide: true, title: '图标'},
                        {align:'center',field: 'url', title: '整改情况',colspan:4},

                    ],
                        [
                            {align:'center',field: 'idx', title: '个数'},
                            {align:'center',field: 'idx', title: '面积'},
                            {align:'center',field: 'idx', title: '个数'},
                            {align:'center',field: 'idx', title: '整改率'},
                            {align:'center',field: 'idx', title: '面积'},
                            {align:'center',field: 'idx', title: '整改率'}
                        ]
                ],
                //数据渲染完的回调
                done: function () {
                    //关闭加载
                    layer.closeAll('loading');
                }
            })
        };
        renderTable();

    });
</script>


</body>
</html>

效果图如下：

麻辣_水煮鱼

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
layui树形表格treetable

treetable树形表格是基于LayUI开发的组件，所以需要先用Layui引入一下文件。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev.
复制链接

扫一扫

专栏目录