【layui】数据表格 表格重载的使用

1、何为重载

重载，简单说，就是函数或者方法有相同的名称，但是参数列表不相同的情形，这样的同名不同参数的函数或者方法之间，互相称之为重载函数或者方法。数据表格的重载也是一样，表格的整体都是一个样子，但是根据不同的参数，会查询到不同的数据！这样大大减少了代码量！

2、实现功能简述

如下图：
(1) 页面初始化的时候加载数据，这是一个不带任何参数的数据查询
(2) 点击请选择期数下拉框，选择相应的数据，又重新查询出数据，用的还是同一个表格
(3) 在请输入用户名内输入对应的姓名，此时表格中的数据在次刷新，查询出对应的数据

3、代码

 <table class="layui-hide" id="ContractCheck"></table>
        <script>
            layui.use('table', function () {
                var table = layui.table;
                table.render({
                    elem: '#ContractCheck'
                    , url: layui.cache.manage + "NO1/V1/ContractCheck/GetAllContract"
                    , parseData: function (res) {
                        if (res.length == 0) {
                            return {
                                "code": 0,
                                "msg": "",
                                "data": res
                            }
                        }
                        else {
                            return {
                                "code": 0,
                                "msg": "",
                                "count": res[0].total,
                                "data": res
                            }
                        }
                    }

                    , groups: 10
                    , layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
                    , cellMinWidth: 120 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[
                        { type: 'checkbox' }
                        , { field: 'contract_Year', title: '年份', sort: true, templet: '#yearFormat', align: 'center', width: 90 }
                        , { field: 'organization', title: '期数', sort: true, align: 'center' }
                        , { field: 'user_name', title: '姓名', align: 'center' }
                        , { field: 'contract_Name', title: '合同', align: 'center' }

                        , { field: 'contract_Copy_Url', title: '合同扫描件', templet: '#ContractPicture', align: 'center' }
                        , { field: 'sc_contract_copy_url', title: '缴费截图', align: 'center', templet: '#ScreenPicture' }
                        , { field: 'sc_check_state', title: '截图状态', align: 'center', templet: '#CheckState' }
                        , { fixed: 'right', title: '操作', toolbar: '#barOperator', align: 'center', width: 220 }
                    ]]
                    , page: true
                    , even: true
                    , id: 'ContractReload'                    
                });

                //执行重载
                var $ = layui.$, active = {
                    reload: function () {
                        var demoReload = $('#user_name');
                        var demoReload1 = $('#allinschool');
                        console.log(demoReload.val());
                        //执行重载
                        table.reload('ContractReload', {
                            page: {
                                curr: 1  //重新从第 1 页开始
                            }
                            , where: {
                                user_name: demoReload.val(),      //参数，对应的是按照姓名查找的参数，其中user_name为后台的controler对应的参数
                                organiza_name: demoReload1.val()  //后台controller的参数
                            }
                        });
                    }
                };

                // 重载1
                $('#allinschool').on('change', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                }); 
                
               // 重载2
                $('#demoTable .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            });
        </script>
        
       //下拉框
       期数：
        <select data-type="reload" id="allinschool" name="organiza_name" lay-verify="required" autocomplete="off" class="select">
            <option value="1" selected disabled style="display: none;">请选择期数</option>           
        </select>

	  //按照姓名查找
	  
   <input type="text" id="user_name" name="user_name" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        <div class="layui-btn layui-btn-sm" data-type="reload" lay-filter="rechar_btn" id="reachar_btn">搜  索</div>