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

实现效果说明

点击任意单元格，选中复选框，并加载子表数据，选择多条复选框，加载多个子表数据拼接

代码

HTML代码

//主表
<table class="layui-hide" id="OrderInfoTable" lay-filter="OrderInfoTable"></table>
//子表
<table class="layui-hide layui-tab" id="FileTable" lay-filter="FileTable"></table>

表格数据加载

一定要加 这个复选框 { field: 'checkbox', type: 'checkbox', checked: 'false', width: 30 },

  //主表-表格
table.render({
    id: 'orderTable',
    elem: '#orderTable',
    url: '/Order/GetOrderInfoList', //数据接口
    where: getParams(),  //获取查询参数
    page: true, //开启分页
    height: 450,
    limit: 10,
    toolbar: '#headbar',
    cols: [[ //表头
        { field: 'checkbox', type: 'checkbox', checked: 'false', width: 30 },
        { field: 'OD_ID', title: 'OD_ID', align: 'center', width: 120, hide: true },
        { field: 'OD_STATUE', title: WJ_Dic4Js('订单状态'), align: 'center', width: 150 },
        { field: 'OD_NO', title: WJ_Dic4Js('订单编号'), align: 'center', width: 240 },
        { field: 'OD_FREUGHT_RECEIVABLE', title: WJ_Dic4Js('应收运费'), align: 'center', width: 120 },
        //{ field: 'OD_DECLARE_NO', title: WJ_Dic4Js('报关单号'), align: 'center', width: 160 },
        { field: 'OD_TIME', title: WJ_Dic4Js('业务时间'), align: 'center', width: 160 },
        { field: 'OD_KH_NAME', title: WJ_Dic4Js('客户'), align: 'center', width: 140 },
        { field: 'OD_START_LAND', title: WJ_Dic4Js('始发地'), align: 'center', width: 240 },
        { field: 'OD_END_LAND', title: WJ_Dic4Js('目的地'), align: 'center', width: 240 },
        { field: 'OD_START_LAND_EG', title: WJ_Dic4Js('始发地英文名称'), align: 'center', width: 240 },
        { field: 'OD_END_LAND_EG', title: WJ_Dic4Js('目的地英文名称'), align: 'center', width: 240 },
        { field: 'OD_CAR_COUNT', title: WJ_Dic4Js('车量'), align: 'center', width: 300 },
        { field: 'OD_ISINSURANCE', title: WJ_Dic4Js('是否购买保险'), align: 'center', width: 120 },
        { field: 'OD_EXIT_WAREHOUSE', title: WJ_Dic4Js('出境库房'), align: 'center', width: 120 },
        { field: 'OD_VEHICLE_INSPECTION_DT', title: WJ_Dic4Js('验车时间'), align: 'center', width: 160 },
        { field: 'OD_STORAGE_DT', title: WJ_Dic4Js('入库时间'), align: 'center', width: 160 },
        { field: 'OD_EXITWAREHOUSE_DT', title: WJ_Dic4Js('进监管时间'), align: 'center', width: 160 },
        { field: 'REMARKS', title: WJ_Dic4Js('备注'), align: 'center', width: 100 },
        { field: 'CREATED', title: WJ_Dic4Js('创建时间'), align: 'center', width: 160 },
        { field: 'CREATOR', title: WJ_Dic4Js('创建人'), align: 'center', width: 140 }
    ]],
    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: '#OrderCarInfoTable',
    id: 'OrderCarInfoTable',
    page: true, //开启分页
    height: 300,
    limit: 9,
    toolbar: '#headbar1',
    cols: [[ //表头
        { field: 'ODC_ISCHECK', title: WJ_Dic4Js('是否验车'), align: 'center', width: 150 },
        { field: 'ODC_VIN', title: WJ_Dic4Js('车架号'), align: 'center', width: 150 },
        { field: 'ODC_CAR_TYPE', title: WJ_Dic4Js('汽车类型'), align: 'center', width: 180 },
        { field: 'ODC_KEY_TYPE', title: WJ_Dic4Js('汽车钥匙类型'), align: 'center', width: 180 },
        { field: 'ODC_KEY_NUMBER', title: WJ_Dic4Js('钥匙柜号'), align: 'center', width: 180 },
        { field: 'ODC_CAR_COLOUR', title: WJ_Dic4Js('车辆颜色'), align: 'center', width: 180 },
        { field: 'ODC_CAR_POWER', title: WJ_Dic4Js('车辆功率'), align: 'center', width: 180 },
        { field: 'ODC_CATEGORY', title: WJ_Dic4Js('汽车品类'), align: 'center', width: 180 },
        { field: 'ODC_CAR_ACCESSORY', title: WJ_Dic4Js('车辆配件'), align: 'center', width: 180 },

        { field: 'REMARKS', title: WJ_Dic4Js('备注'), align: 'center', width: 100 },
        { 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' }
    ]],
    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.on('checkbox(orderTable)', function (obj) {
    var check = table.checkStatus('orderTable');
    if (obj.checked == true) {
    	//改变当前tr背景颜色和字体颜色
        $(obj.tr.selector).attr({ "style": "background:#c2c2c2;" });

    } else {
        $(obj.tr.selector).attr({ "style": "background:" });//取消当前tr颜色
    }
    var ids = "";
    for (var i = 0; i < check.data.length; i++) {
        ids += check.data[i].OD_ID + ',';
        quanju = ids;
        if (check.data[0].OD_STATUE != check.data[i].OD_STATUE) {
            fnLayui.alert('请选择相同状态的订单');
        }
    }
    if (ids != null && ids != '') {
        HttpGet("/Order/GetOrderCarInfoList", { orderId: ids }, function (res) {
            table.reload('OrderCarInfoTable', { data: res.data.rows });
        })

    } else {
        table.reload('OrderCarInfoTable', { data: [] });
    }

     obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
});

点击表格任意单元格，选中复选框和取消复选框选中

   //点击表格任一单元格，默认选中复选框
$(document).on("click", ".layui-table-body table.layui-table tbody tr", function (data) {
        var obj = event ? event.target : event.srcElement;
        var tag = obj.tagName;
        var checkbox = $(this).find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
        if (checkbox.length != 0) {
            if (tag == 'DIV') {
                checkbox.click();
            }
        }
    });

    //取消选中
$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
        e.stopPropagation();
    });

效果图

选中一行

选中两行