最近一直使用Layui开发新的项目,这个框架界面十分美观,功能也很全面。但项目中频繁的调用一些Layui方法,针对这些方法进行一次封装,便利开发者的使用。
这里先写了对表格初始化的封装,js脚本直接引用即可,调用方法非常简单。
暂时就先写这么多,后续会先补充获取选中行数据,获取表格所有数据,获取表单的数据和对表单赋值的封装。
如有不明白之处，请查看文档或留言。

第一次使用Layui开发项目,对Layui进行了一次二次封装,先上传对表格的封装,未完待续…

废话不多看源码

 

1  <!-- 列表 -->
2         <table class="layui-table" lay-filter="filterId">
3             <thead>
4                 <tr>
5                     <th lay-data="{type:\'checkbox\'}"></th>
6                     <th lay-data="{field:\'Name\', align:\'center\'}">名称</th>
7                 </tr>
8             </thead>
9         </table>

 

 

  1  (function () {//闭包,避免影响其他的源码 
  2      var layuiTable = {
  3          defaultValue: function (value, _defultvalue) {
  4              if (value === null || value === "" || value === undefined) {
  5                  return _defultvalue;
  6              }
  7              return value;
  8          },
  9          allowedMethods: [
 10             \'getData\',
 11             \'getSelections\'
 12          ],
 13          layuiTable: function (option) {
 14              return {
 15                  height: this.defaultValue(option.height, \'full-21\'),
 16                  even: this.defaultValue(option.even, true),
 17                  page: this.defaultValue(option.page, true),
 18                  toolbar: this.defaultValue(option.toolbar, \'#oper-batch\'),
 19                  method: this.defaultValue(option.method, \'post\'),
 20                  url: this.defaultValue(option.url, null),
 21                  request: this.defaultValue(option.request, { pageName: \'pageIndex\', limitName: \'pageSize\' }),
 22                  limit: this.defaultValue(option.limit, 20),
 23                  limits: this.defaultValue(option.limits, [10, 20, 30, 50, 100, 200, 500]),
 24                  where: this.defaultValue(option.where, {}),
 25                  contentType: \'application/json\',
 26                  id: this.defaultValue(option.id, \'\'),
 27                  done:option.done,
 28                  parseData: function (res) {
 29                      return {
 30                          \'code\': 0,
 31                          \'msg\': res.message, //解析提示文本
 32                          \'count\': res.total, //解析数据长度
 33                          \'data\': res.rows //解析数据列表
 34                      };
 35                  }
 36              }
 37          }
 38      };
 39  
 40  
 41  
 42  $.extend({
 43   createLayuiTable: function (tablefilter, tableOptions) {//创建表格
 44              layui.use([\'table\', \'layer\'], function () {//layui 模块引用，根据需要自行修改
 45                  var layer = layui.layer, table = layui.table;
 46                  if (!$.isFunction(tableOptions.done)) {//不是函数
 47                      tableOptions.done = function (res, curr, count) { }
 48                  }
 49                  tableOptions.id = layuiTable.defaultValue(tableOptions.id, tablefilter);
 50                  table.init(tablefilter, layuiTable.layuiTable(tableOptions));//表格初始化
 51              });
 52          }
 53    });
 54    
 55        $.fn.extend({
 56          getFormObj: function () {
 57             var data = $(this).serializeArray();
 58             var obj = {};
 59             for (var key in data) {
 60                 obj[data[key].name] = data[key].value;
 61             }
 62             return obj;
 63         },
 64         setFormObj: function (viewModel) {
 65             var currentId = $(this).selector.replace(\'#\', \'\');//获取id
 66             layui.use([\'form\'], function () {
 67                 var form = layui.form;
 68                 form.val(currentId, viewModel)
 69             });
 70         },
 71          layuiTable: function (option) {
 72             if (typeof option === \'string\') {
 73                 var currentId = $(this).selector.replace(\'#\', \'\');//获取id
 74                 var rows = [];
 75                 layui.use([\'table\', \'layer\'], function () {//layui 模块引用，根据需要自行修改
 76                     var layer = layui.layer, table = layui.table;
 77                     if (option === "getData") {//或者当前加载的数据。假如设置 useCurrentPage 为 true，则返回当前页的数据。
 78                         var result = table.cache["" + currentId + ""];
 79                         if (result instanceof Array) {
 80                             rows = result;
 81                         }
 82                     }
 83                     else if (option === "getSelections")//返回所选的行，当没有选择任何行的时候返回一个空数组。
 84                     {
 85                         var result = table.checkStatus(currentId).data;
 86                         if (result instanceof Array) {
 87                             rows = result;
 88                         }
 89                     }
 90                     else {
 91                         console.log("未知参数")
 92                     }
 93                 });
 94                 return rows;
 95             }
 96             else {
 97                 throw new Error("参数不合法,请输入string类型: " + option);
 98             }
 99         },
100         reloadTable: function (option) {
101             if ($.isPlainObject(option)) {//判断参数是否为对象
102                 var currentId = $(this).selector.replace(\'#\', \'\');//获取id
103                 layui.use([\'table\', \'layer\'], function () {//layui 模块引用，根据需要自行修改
104                     var layer = layui.layer, table = layui.table;
105                     table.reload(currentId, option);
106                 });
107             }
108             else {
109                 throw new Error("参数不合法 : " + option);
110             }
111         }
112         });
113  }())

 

 

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

 

调用初始化表格的方法:

1   $.createLayuiTable(\'filterId\', {
2                     url: this.urls.pagination,//你的路径
3                     where: { value: JSON.stringify(this.viewModel) },//传递参数
4                 });

 获取表格选中行数据:

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

获取表格所有数据

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

 强制刷新表格到第一页

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

 带页码更新表格

1   $l_table.reloadTable({//带页码更新
2                         request: { pageName: \'pageIndex\', limitName: \'pageSize\' },
3                         page: { curr: $(".layui-laypage-em").next().html() }
4                     });

获取表单数据方法

1 <form class="layui-form" id="FormId" lay-filter="FormId">
2   <input type="text" name="Name" class="layui-input" lay-verify="required">
3    <button type="button" class="layui-btn btn-blue" onclick="save">保存</button>
4 </form>
1  function save(){
2      var data = $("#FormId").getFormObj();//获取表单数据
3      var name=data.Name;
4  }

 

对表单赋值

1  var data = new Object();
2  data.Name="贤心"
3 $("#FormId").setFormObj(data);

 

作者：茏仔
链接：https://www.cnblogs.com/xiaolong886/p/11082821.html
来源：博客园
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

版权声明：本文为xiaolong886原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaolong886/p/11082821.html