layui-soul-table 无限级子表

组件地址

https://saodiyang.gitee.io/layui-soul-table/#/zh-CN/component/child/basic

var childTable = null;
var xqTable = null;
var myTableIns = null;
var soulTable = null;
var spread = false;
var response = {
    statusName: 'success' //数据状态的字段名称，默认：code
    , statusCode: true //成功的状态码，默认：0
    , msgName: 'message' //状态信息的字段名称，默认：msg
    , countName: 'total' //数据总数的字段名称，默认：count
    , dataName: 'rows' //数据列表的字段名称，默认：data
};


var variableCols = [[
    { field: 'shortName', title: '变量名称', filter: true },
    { field: 'fullName', title: '完整名称', sort: true },
    {
        field: 'type', title: '取值类型', sort: true, templet: function (d) {
            switch (d.type) {
                case 0: return "默认值";
                case 1: return "SQL语句取值";
                case 2: return "变量计算取值";
                default: return "";
            }
        }
    },
    {
        field: 'dataType', title: '参数类型', sort: true, templet: function (d) {
            switch (d.dataType) {
                case 0: return "数值类型";
                case 1: return "字符类型";
                case 2: return "时间类型";
                default: return "";
            }
        }
    },
    { field: 'defVal', title: '默认数据' },
    { field: 'sourceData', title: 'SQL语句' },
    { title: '操作', toolbar: '#barVar',  250 }
    ]];


var logicCols = [[
    { field: 'expression', title: '逻辑表达式', filter: true },
    { field: 'remark', title: '描述', sort: true },
    { field: 'result', title: '结果', sort: true },
    { title: '操作',  256, templet: '#barLogic' }
]];





/**
 * 事项表展开后的子表配置
 * @param {any} row
 */
var childTable = function (row) {
    var col = childColsData(row);
    return [
        {
            title: "数值数据"
            , url: 'TrendChart.aspx?action=loadvar'
            , page: false
            , overflow: 'tips'
            , filter: {
                bottom: false
            }
            , where: function (row) {
                return { matterId: row.id }
            }
            , cols: variableCols
            , toolEvent: function (obj, pobj) {
                var self = this;
                xqTable = this.id;
            }
            , response: response
            , done: function (res) {
                var cols = this.cols;
                soulTable.render(this);
            }
        }
        ,
        {
            title: '计算逻辑'
            , url: 'TrendChart.aspx?action=loadlogic'
            , limit: 1000000
            , page: false
            , overflow: 'tips'
            , filter: {
                bottom: false
            }
            , where: function (row) {
                avalon.log(row)
                return { matterId: row.id, pid: 0 }
            }
            , cols: col
            , response: response
            , toolEvent: function (obj, pobj) {
                var self = this;
                //avalon.log("计算条件toolEvent",this.id);
                xqTable = self.id;
                //LogicDataToolEvent(obj);
            }
            , done: function () {
                avalon.log("计算条件", this.id);
                soulTable.render(this);
            }
        }
    ]
}

/**
 * 逻辑子表的列设置
 * @param {any} row
 */
var childColsData = function (row) {
    return [[{
        title: '#',  50, children: function (row) {
            //console.log("子表", row)
            var arr = childLogicTable(row);
            //console.log("列", arr)
            return arr;
        }
    }
        , { field: 'expression', title: '逻辑表达式', filter: true },
    { field: 'remark', title: '描述', sort: true },
    { field: 'result', title: '结果', sort: true },
    { title: '操作',  256, templet: '#barLogic' }
    ]];
}
/**
 * 无限级子表的设置
 * @param {any} row
 */
var childLogicTable = function (row) {
    var col = childColsData(row);
    var title = row.expression + " 结果为真时";
    return [
        {
            title: title
            , url: 'TrendChart.aspx?action=loadlogic'
            , limit: 1000000
            , page: false
            , overflow: 'tips'
            , filter: {
                bottom: false
            }
            , where: function (row) {
                avalon.log(row)
                return { matterId: row.matterId, pid: row.id }
            }
            , cols: col
            , response: response
            , toolEvent: function (obj, pobj) {
                var self = this;
                //avalon.log("计算条件toolEvent",this.id);
                xqTable = self.id;
                //LogicDataToolEvent(obj);
            }
            , done: function () {
                avalon.log("计算条件", this.id);
                soulTable.render(this);
            }
        }
    ]
}


var vm = avalon.define({
    $id: "controller"
    , searchdata: {kw:""}
    , loadData: function () {
        GetApiDataSync2("TrendChart.aspx?action=load"
            , 'get'
            , {}
            , function (result) {
                myTableIns.reload({
                    data: result.rows
                })
            }, true
        );
    }
});

layui.config({ base: '/Components/layui/extend/' })
    .extend({
        tableEdit: 'TableColumnEdit/tableEdit'
        , soulTable: 'layui-soul-table/ext/soulTable'
        , tableChild: 'layui-soul-table/ext/tableChild'
        , tableFilter: 'layui-soul-table/ext/tableFilter'
        , excel: 'layui-soul-table/ext/excel'
        , tableMerge: 'layui-soul-table/ext/tableMerge'

    }).use(['form', 'element', 'jquery', 'table', 'layer', 'upload', 'tableChild', 'soulTable', 'upload', 'laydate', 'tableEdit'], function () {
        var $ = layui.$,
            form = layui.form,
            table = layui.table;
        //soulTable = layui.tableChild;
        soulTable = layui.soulTable;

        layui.form.on('select', function (data) {
            var result = data.elem.getAttribute("result");
            var callback = data.elem.getAttribute("callback");
            if (callback) {
                window[callback] && window[callback](data, result)
            }
        });

        InitData();
        vm.loadData();
    });

function InitData() {
    myTableIns = layui.table.render({
        elem: '#myTable'
        , height: $(document).height() - $('#myTable').offset().top - 20
        , limit: 999
        , soulSort: true
        , page: false
        , overflow: 'tips'
        , filter: {
            bottom: false
        }
        , cols: [[
            {
                title: '#',  50, spread: spread, isChild: true
                , children: function (row) {
                    return childTable(row);
                }
            },
            { field: 'matterName', title: '事项名称', filter: true },
            { field: 'remark', title: '说明' },
            { title: '操作', toolbar: '#barRoot',  450 }
        ]]
        , done: function (res) {
            var cols = myTableIns.config.cols;
            /**
            * 参数cols是table.render({})中的cols属性值
            * aop代理是基于event点击事件进行操作的，
            * 因此cols中务必开启event点击事件！
            **/
            //delete cols[0][0];

            soulTable.render(this)
        }
    });
}

 <table id="myTable" lay-filter="myTable" class="layui-hidden" style="display: none">
    </table>

脚本需要使用layui 需要自行添加引用