layerUI

layui树形表格treeTable

https://fly.layui.com/jie/30625/

https://gitee.com/whvse/treetable-lay

代码demo

// 加载列表树
    layui.config({
        base: '../../plugins/treeTable/'
      }).extend({
        treetable: 'treetable-lay/treetable'
    })

// 渲染表格
    layui.use(['treetable'], function () {
        var treetable = layui.treetable;
        // $.adapter_post(params, 'sys/user/getPointInfo', function (d) {
        //     if (d.status == "base-0001") {
        //       tabledata = flatten(d.data);
        //     }
        // })
        var tabledata=[
                {
                  "id": 1,
                  "name": "xx",
                  "sex": "male",
                  "pid": -1
                },
                {
                  "id": 2,
                  "name": "xx",
                  "sex": "male",
                  "pid": 1
                },
                {
                  "id": 3,
                  "name": "xx",
                  "sex": "male",
                  "pid": 1
                },
                {
                  "id": 4,
                  "name": "xx",
                  "sex": "male",
                  "pid": 1
                },
                {
                  "id": 5,
                  "name": "xx",
                  "sex": "male",
                  "pid": -1
                }
                
              ]
        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 0,
            treeSpid: -1,
            treeIdName: 'id',
            treePidName: 'pid',
            elem: '#tableList',
            data: tabledata,
            page: false,
            treeLinkage: false, //父级展开时是否自动展开所有子级
            treeDefaultClose: true, //全部关闭，默认是全部展开的
            cols: [[
                {field: 'name', title: 'name'},
            ]],
            done: function () {
                layer.closeAll('loading');
            }
        });
        
    });

html

<table id="tableList" class="table table-striped table-bordered dataTable no-footer"    >
		</table>

需要注意的地方：

           treeColIndex: 0,  //树形图标显示在第几列
            treeSpid: -1, //最上级的父级id，注意必须data中父ID的值，比如此demo中父ID名为pid，最上级的父ID值是-1
            treeIdName: 'id', //id字段的名称  可自定义
            treePidName: 'pid', //pid字段的名称 可自定义
            elem: '#tableList', //table的ID
            data: tabledata,//数据，注意数据格式[ ]

 

我踩的坑

执行时，总提示“ Maximum call stack size exceeded”

插件的下面代码陷入死循环

  // 对数据进行排序
            var sort = function (s_pid, data) {
                 console.log(data.length)
                for (var i = 0; i < data.length; i++) {
                    if (data[i].pid == s_pid) {
                        var len = mData.length;
                        if (len > 0 && mData[len - 1].id == s_pid) {
                            mData[len - 1].isParent = true;
                        }
                        mData.push(data[i]);
                       
                        sort(data[i].id, data);
                    }
                }
            };
            sort(param.treeSpid, tNodes);

原来是当id与pid值相等时就会不断执行 sort(data[i].id, data);

解决：让id与pid值不相等