layui点击可以伸缩的数据表格实例(表格行伸缩)

layui制作可以伸缩的数据表格；

具体表现为以下
效果图：

以下提供js代码与json代码

js代码：

以下代码为自动渲染表格；需要注意的是tree属性和col属性

tree: tree中的idName和pidName分别对应json数据中的本身唯一id和父级唯一id;
col: col中需要注意嵌套的对象和数组以及模板 ；下面的示例演示了layui特性的一些用法；大家可以根据项目实际情况来选择

// 渲染表格
            var insTb = treeTable.render({
                elem: '#LAY_table_user',
                url: 'json/menus.json',
                height: 'full-200',
                tree: {
                    iconIndex: 0,
                    isPidData: true,
                    idName: 'authorityId',
                    pidName: 'parentId'
                },
                cols: [
                    [
                        {title: '管理指标体系', colspan: 18},
                    ],
                    [
                        {field: 'authorityName', title: '对标指标', minWidth: 165},
                        {
                            title: '菜单图标', align: 'center', hide: true,
                            templet: '<p><i class="layui-icon {{d.menuIcon}}"></i></p>'
                        },
                        {field: 'authority', title: '数据单位'},
                        {title: '数据精度', templet: '<p>{{d.isMenu?"菜单":"按钮"}}</p>', align: 'center', width: 60},
                        {
                            title: '报送周期', templet: function (d) {
                                return util.toDateString(d.createTime);
                            }
                        },
                        {field: 'authority', title: '权重'},
                        {field: 'authority', title: '本期值'},
                        {field: 'authority', title: '累计值'},
                        {field: 'authority', title: '累计分子值'},
                        {field: 'authority', title: '累计分母值'},
                        {field: 'authority', title: '审核累计值'},
                        {field: 'authority', title: '段位'},
                        {field: 'authority', title: '排名'},
                        {field: 'authority', title: '最优值'},
                        {field: 'authority', title: '最差值'},
                        {field: 'authority', title: '平均值'}
                    ],

                ],
                style: 'margin-top:0;'
            });

menus.json数据

这个json数据里面需要layui需要读取用到authorityId,menuIcon，isMenu，open，parentId等字段；

authorityId : 当前数据id
parentId ：当前指向父级id；可以被识别包含
menuIcon ： 折叠展开的图标按钮
isMenu ：是否属于菜单下；
open ： 默认是否展示

{
  "code": 0,
  "msg": "",
  "count": 19,
  "data": [
    {
      "authorityId": 1,
      "authorityName": "国网湖南省电力公司长沙供电分公司",
      "orderNumber": 1,
      "menuUrl": null,
      "menuIcon": "layui-icon-set",
      "createTime": "2018/06/29 11:05:41",
      "authority": null,
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 0,
      "parentId": -1,
      "open": true
    },
    {
      "authorityId": 2,
      "authorityName": "安监部",
      "orderNumber": 2,
      "menuUrl": "system/user",
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": null,
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 0,
      "parentId": 1,
      "open": true
    },
    {
      "authorityId": 3,
      "authorityName": "人身伤亡",
      "orderNumber": 3,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/07/21 13:54:16",
      "authority": "user:view",
      "checked": 0,
      "updateTime": "2018/07/21 13:54:16",
      "isMenu": 1,
      "parentId": 2,
      "open": true
    },
    {
      "authorityId": 4,
      "authorityName": "电网和设备事件数",
      "orderNumber": 4,
      "menuUrl": null,
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": "user:add",
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 1,
      "parentId": 2,
      "open": true
    },
    {
      "authorityId": 5,
      "authorityName": "误操作事件",
      "orderNumber": 5,
      "menuUrl": null,
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": "user:edit",
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 1,
      "parentId": 2,
      "open": true
    },
    {
      "authorityId": 6,
      "authorityName": "信息和网络安全事件",
      "orderNumber": 6,
      "menuUrl": null,
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": "user:delete",
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 1,
      "parentId": 2,
      "open": true
    }
  ]
}

自己看了一些示例慢慢摸索出来的，在此分享给大家；如发现有错误请各位指正！加油加油加油！！

以上。