Layui数据表格点击事件实现其他表格的多条件查询

开发工具与关键技术：MVC、C#、Layui
作者：张俊辉
撰写时间：2019年04月17日

• 在关联表查询时，往往会出现一对多的关系，这种表格一般情况下不适合联表查询，经常会拆分为两个表格进行查询，这种时候就适用此功能！
  代码如下：

var tableSupplier;//供应商
var tableSupplierLinkman;//供应商联系人
//表格渲染
layui.use(['table', 'layer'], function () {
    var table = layui.table;
    var layer = layui.layer;
    //供应商信息表
    tableSupplier = table.render({
        elem: '#Supplier'
      , method: 'post'
      , toolbar: '#toolbarDemo'
      , id: 'idTest'
      , url: 'SelectSupplier' //数据接口
      , page: true //开启分页
      , cols: [[ //表头
       //具体相关参数请产考Layui说明文
      ]]
      , limit: 5
        , response: {
            statusName: 'success' //规定数据状态的字段名称，默认：code
          , statusCode: true //规定成功的状态码，默认：0
          , countName: 'totalRows' //规定数据总数的字段名称，默认：count
        }
        , request: {
            pageName: 'curPage' //页码的参数名称，默认：page
          , limitName: 'pageSize'
        }
   });

    //供应商联系人表
    tableSupplierLinkman = table.render({
        elem: '#SupplierLinkman'
      , method: 'post'
      , id: 'idTest2'
      , url: 'SelectSupplierLinkman' //数据接口
      , toolbar: '#toolbarDemo'
      , height: 215
      , page: false //开启分页
      , cols: [[ //表头
        具体相关参数请产考Layui说明文档
      ]]
        , response: {
            statusName: 'success' //规定数据状态的字段名称，默认：code
          , statusCode: true //规定成功的状态码，默认：0
          , countName: 'totalRows' //规定数据总数的字段名称，默认：count
        }
        , request: {
            pageName: 'curPage' //页码的参数名称，默认：page
          , limitName: 'pageSize'
        }
    });
    //监听供应商信息行单击事件
    table.on('row(Supplier)', function (obj) {
        tableSupplierLinkman2 = table.reload('idTest2', {
            where: { //设定异步数据接口的额外参数，任意设
                SupplierID: obj.data.SupplierID
            }
        });
    });
});

效果图如下：