layui-实现上下表，父子表单选加载事件

- 代码
- - HTML代码
  - 表格数据加载
  - 点击主表行，加载子表数据
- 实现效果图

代码

主子表，实现点击主表的单元格实现选中主表，并加载子表

HTML代码

//主表
<table class="layui-hide" id="SysFeeTable" lay-filter="SysFeeTable"></table>
//子表
<table class="layui-hide" id="SysFeeScheduleTable" lay-filter="SysFeeScheduleTable">

表格数据加载

实现单选一定要加{ type: 'radio' },

//主表数据
table.render({
        elem: '#SysFeeTable',
        url: '/FeeCollection/GetSysFeeList', //数据接口
        where: getParams(),  //获取查询参数
        page: true, //开启分页
        height: 450,
        limit: 30,
        limits: [30, 60, 90, 200, 500],
        toolbar: '#headbar',
        cols: [[ //表头
            { type: 'radio' },
            { field: 'SF_CODE_TEXT', title: WJ_Dic4Js('费目名称'), align: 'center', width: 180 },
            {
                field: 'SF_PAYMENTFLAG', title: WJ_Dic4Js('收付标志'), align: 'center', width: 120,
                templet: function (d) {
                    if (d.SF_PAYMENTFLAG == "S") {
                        return "收";
                    } else {
                        return "付";
                    }
                }
            },
            { field: 'SF_BILLING_UNIT', title: WJ_Dic4Js('费目计价单位'), align: 'center', width: 140 },
            { field: 'CREATED', title: WJ_Dic4Js('创建时间'), align: 'center', width: 160 },
            { field: 'CREATOR', title: WJ_Dic4Js('创建人'), align: 'center', width: 140 },
            { field: 'LASTMODIFIED', title: WJ_Dic4Js('操作时间'), align: 'center', width: 160 },
            { field: 'LASTMODIFIER', title: WJ_Dic4Js('操作人'), align: 'center', width: 140 },
            { title: WJ_Dic4Js('操作'), align: 'center', toolbar: '#rowsbar', width: 280, fixed: 'right' }

        ]],
        parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
            return {
                "code": res.state, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.rows //解析数据列表
            };
        }, done: function (res, curr, count) {
            WJ_DIC_CHANGE_INNER();

        }
    });

//子表数据加载
  table.render({
        elem: '#SysFeeScheduleTable',
        data: [],
        page: true, //开启分页
        height: 450,
        limit: 30,
        toolbar: '#headbar1',
        cols: [[ //表头
            { type: 'radio' },
            { field: 'SFS_NAME', title: WJ_Dic4Js('费目细项名称'), width: 220, align: 'center' },
            { field: 'SFS_BILLING_UNIT', title: WJ_Dic4Js('计价单位'), align: 'center', width: 230 },
            { field: 'SFS_FEE_RATES', title: WJ_Dic4Js('费率'), width: 140, align: 'center' },
            { field: 'CREATED', title: WJ_Dic4Js('创建时间'), align: 'center', width: 160 },
            { field: 'CREATOR', title: WJ_Dic4Js('创建人'), align: 'center', width: 140 },
            { field: 'LASTMODIFIED', title: WJ_Dic4Js('操作时间'), align: 'center', width: 160 },
            { field: 'LASTMODIFIER', title: WJ_Dic4Js('操作人'), align: 'center', width: 140 },
            { title: WJ_Dic4Js('操作'), align: 'center', toolbar: '#rowsbar1', width: 280, fixed: 'right' }
        ]], done: function (res, curr, count) {
            WJ_DIC_CHANGE_INNER();

        }
    });

点击主表行，加载子表数据

    //行单击事件（双击事件为：rowDouble）
    table.on('row(SysFeeTable)', function (obj) {
        //行单选框选中事件
        //选中行样式
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click'); 		
        obj.tr.find('input[lay-type="layTableRadio"]').prop("checked", true);
        $('.layui-table tr').css("background", "");//取消颜色
        $(this).css("background", "#c2c2c2");//添加行颜色
        var index = obj.tr.data('index')
        var thisData = table.cache["SysFeeTable"];
        layui.each(thisData, function (i, item) {
            if (index === i) {
                item.LAY_CHECKED = true;
            } else {
                delete item.LAY_CHECKED;
            }
        });
        form.render('radio');

        var data = obj.data;
        //刷新费目细项列表
        if (data.ID) {
            HttpGet("/FeeCollection/GetSysFeeScheduleList", { SFS_SF_ID: data.ID }, 
            function (res) {
            //为SysFeeScheduleTable赋值
                table.reload('SysFeeScheduleTable', { data: res.data.rows });
            })
        }
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
    });