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
来源：博客园
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。