Layui二次封裝

第一次使用Layui開發項目,對Layui進行了一次二次封裝,先上傳對表格的封裝,未完待續...

廢話不多看源碼

 

 <!-- 列表 -->
        <table class="layui-table" lay-filter="filterId">
            <thead>
                <tr>
                    <th lay-data="{type:'checkbox'}"></th>
                    <th lay-data="{field:'Name', align:'center'}">名稱</th>
                </tr>
            </thead>
        </table>

 

 

 (function () {//閉包,避免影響其他的源碼 
     var layuiTable = {
         defaultValue: function (value, _defultvalue) {
             if (value == null || value == null || value == undefined) {
                 return _defultvalue;
             }
             return value;
         },
         allowedMethods: [
            'getData',
            'getSelections'
         ],
         layuiTable: function (option) {
             return {
                 height: this.defaultValue(option.height, 'full-21'),
                 even: this.defaultValue(option.even, true),
                 page: this.defaultValue(option.page, true),
                 toolbar: this.defaultValue(option.toolbar, '#oper-batch'),
                 method: this.defaultValue(option.method, 'post'),
                 url: this.defaultValue(option.url, null),
                 request: this.defaultValue(option.request, { pageName: 'pageIndex', limitName: 'pageSize' }),
                 limit: this.defaultValue(option.limit, 20),
                 limits: this.defaultValue(option.limits, [10, 20, 30, 50, 100, 200, 500]),
                 where: this.defaultValue(option.where, {}),
                 contentType: 'application/json',
                 id: this.defaultValue(option.id, ''),
                 done:option.done,
                 parseData: function (res) {
                     return {
                         'code': 0,
                         'msg': res.message, //解析提示文本
                         'count': res.total, //解析數據長度
                         'data': res.rows //解析數據列表
                     };
                 }
             }
         }
     };
 
 
 
 $.extend({
  createLayuiTable: function (tablefilter, tableOptions) {//創建表格
             layui.use(['table', 'layer'], function () {//layui 模塊引用，根據需要自行修改
                 var layer = layui.layer, table = layui.table;
                 if (!$.isFunction(tableOptions.done)) {//不是函數
                     tableOptions.done = function (res, curr, count) { }
                 }
                 tableOptions.id = layuiTable.defaultValue(tableOptions.id, tablefilter);
                 table.init(tablefilter, layuiTable.layuiTable(tableOptions));//表格初始化
             });
         }
   });
   
       $.fn.extend({
         getFormObj: function () {
            var data = $(this).serializeArray();
            var obj = {};
            for (var key in data) {
                obj[data[key].name] = data[key].value;
            }
            return obj;
        },
        setFormObj: function (viewModel) {
            var currentId = $(this).selector.replace('#', '');//獲取id
            layui.use(['form'], function () {
                var form = layui.form;
                form.val(currentId, viewModel)
            });
        },
         layuiTable: function (option) {
            if (typeof option === 'string') {
                var currentId = $(this).selector.replace('#', '');//獲取id
                var rows = [];
                layui.use(['table', 'layer'], function () {//layui 模塊引用，根據需要自行修改
                    var layer = layui.layer, table = layui.table;
                    if (option == "getData") {//或者當前加載的數據。假如設置 useCurrentPage 為 true，則返回當前頁的數據。
                        var result = table.cache["" + currentId + ""];
                        if (result instanceof Array) {
                            rows = result;
                        }
                    }
                    else if (option == "getSelections")//返回所選的行，當沒有選擇任何行的時候返回一個空數組。
                    {
                        var result = table.checkStatus(currentId).data;
                        if (result instanceof Array) {
                            rows = result;
                        }
                    }
                    else {
                        console.log("未知參數")
                    }
                });
                return rows;
            }
            else {
                throw new Error("參數不合法,請輸入string類型: " + option);
            }
        },
        reloadTable: function (option) {
            if ($.isPlainObject(option)) {//判斷參數是否為對象
                var currentId = $(this).selector.replace('#', '');//獲取id
                layui.use(['table', 'layer'], function () {//layui 模塊引用，根據需要自行修改
                    var layer = layui.layer, table = layui.table;
                    table.reload(currentId, option);
                });
            }
            else {
                throw new Error("參數不合法 : " + option);
            }
        }
        });
 }())

 

 

var $l_table = $("#filterId");//表格Id

 

調用初始化表格的方法:

  $.createLayuiTable('filterId', {
                    url: this.urls.pagination,//你的路徑
                    where: { value: JSON.stringify(this.viewModel) },//傳遞參數
                });

 獲取表格選中行數據:

var rows = $l_table.layuiTable('getSelections');

獲取表格所有數據

 var rows =$l_table.layuiTable("getData");

 強制刷新表格到第一頁

    $l_table.reloadTable({
                        request: { pageName: 'pageIndex', limitName: 'pageSize' },
                        page: { curr: 1 }
                    });

 帶頁碼更新表格

  $l_table.reloadTable({//帶頁碼更新
                        request: { pageName: 'pageIndex', limitName: 'pageSize' },
                        page: { curr: $(".layui-laypage-em").next().html() }
                    });

獲取表單數據方法

<form class="layui-form" id="FormId" lay-filter="FormId">
  <input type="text" name="Name" class="layui-input" lay-verify="required">
   <button type="button" class="layui-btn btn-blue" onclick="save">保存</button>
</form>

 function save(){
     var data = $("#FormId").getFormObj();//獲取表單數據
     var name=data.Name;
 }

 

對表單賦值

 var data = new Object();
 data.Name="賢心"
$("#FormId").setFormObj(data);

 

作者：蘢仔
鏈接：https://www.cnblogs.com/xiaolong886/p/11082821.html
來源：博客園
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。