Layui 数据表格的重载

开发工具与关键技术：mvc、layui、js、html
作者：张俊辉
撰写时间：2019年03月28日

下面我们使用layui里的数据表格模块初始化并渲染表格，后台代码与bsgrid数据表格书写方式一样，而前台代码需要注意设置参数：request(用于对分页请求的参数：page、limit重新设定名称), response(用于对返回的数据格式的自定义),代码如下：
HTML代码：

<table id="SupplierLinkman"></table>
<table id="SelSupplierLinkman"></table>

JS代码：

var tableSupplierLinkman;
layui.use('table', function () 
{
    var table = layui.table;
        //供应商联系人表
        tableSupplierLinkman = table.render
		({
            elem: '#SupplierLinkman'
          , method: 'post'
          , url: 'SelectSupplierLinkman' //数据接口
          , page: true //开启分页
          , cols: 
			[[ //表头
             {field:'SupplierLinkmanID',title:'联系人ID'}
            ,{field:'Linkman',title:'联系人'}
            ,{field:'TelePhone',title:'电话'}
            ,{field:'MobilePhone',title:'手机'}
            ,{field:'QQ',title:'QQ'}
            ,{field:'Mailbox',title:'邮箱'}
            ,{field:'Duty',title:'职务'}
            ,{field:'NativePlace',title:'籍贯'}
            ,{field:'Sex',title:'性别'}
            ,{field:'Remark',title:'备注'}
            ,{field:'SupplierID',title:'供应商ID'}
          ]]
            , limit: 5
            , response: 
			{
                statusName: 'success' //规定数据状态的字段名称，默认：code
              , statusCode: true //规定成功的状态码，默认：0
              , countName: 'totalRows' //规定数据总数的字段名称，默认：count
            }
            , request: 
			{
                pageName: 'curPage' //页码的参数名称，默认：page
              , limitName: 'pageSize'
            }
        });
});

效果图便是下图方框内的图案，

表格出来后为了实现某些功能引用了layui内的表格重载方法，因上图查看功能内需要使用到一个与方框内数据一样的表格，所以使用了重载这方法，使我节省了重复写后台代码的时间！
代码如下：

//供应商联系人重载
 tableSupplierLinkman.reload({
    elem: '#SelSupplierLinkman’
});

此代码使原本写在id为SupplierLinkman’的表格重载到id为SupplierLinkman’的表格中，重载后原表格的动态加载数据作废不能事项其他任何操作比如多条价查询等，如需再次使用原表格只需把id号重载到原id号就好，代码格式与上方待码一样只需把id号改为原id号即可！效果图如下(方框内便是重载后的表格)：