1.前言：
layui用了几年，这个框架非常适宜咱们后盾人员开发。简略易用，用的较多的模块必定是table模块和form模块了。然而在一个开发团队中，不同的人开发程度的差别，如果没有调用对立的公共办法，那就会造成很多款式的不同和公共的bug呈现到不同的页面 从而呈现消耗过多的精力批改bug。所以咱们须要做的是对立款式和办法的调用，将其二次封装以便于开发人员的调用。另一方面也能缩小代码的冗余量。
2. layui-table的封装
2.1.页面形成：个别在页面的table的形成如下： 搜寻区 头部工具栏 和table主体【蕴含对行和列 事件的解决】
须要的几点是： ‘’兼容‘’ 官网table的参数options 设置了默认值 和能够笼罩默认值 、 反对搜寻办法（search/reset 【代表重置搜寻】） 和 可能获取的layui的table组件
对外提供的办法
2.2.从应用案例去解析每个办法
如下列所示，首先是创建对象【这个是我封装的table组件对象】，重点在于init办法是初始化整个table
<script>
var grid = new LayDataTable();
grid.init({
elem: '#listTable',
data: resDt.data,
// defaultToolbar: ['filter', 'print', 'exports',
// {
// title: 'wifi' //题目
// ,layEvent: 'wifi' //事件名，用于 toolbar 事件中应用
// ,icon: 'layui-icon-wifi' //图标类名
// },
// {
// title: '受权' //题目
// ,layEvent: 'auz' //事件名，用于 toolbar 事件中应用
// ,icon: 'layui-icon-auz' //图标类名
// }
// ],
toolbar: 'default', //开启工具栏，此处显示默认图标，能够自定义模板，详见文档
title: '用户表',
totalRow: true, //开启共计行
cols: [
[
//...
]
]
}, function(checkStatus, event) {
console.log(checkStatus, event);
}, function(obj) {
console.log(obj);
}, "searchId");
//搜寻的办法
function searchF() {
grid.search();
}
//重置
function reset() {
grid.reset();
}
</script>init 办法
init 办法的入参有四个别离是table的options【这个参考layui官网】、头部工具栏的点击事件、table行点击事件 和搜寻区的id【当然搜寻区用的也是layui的组件 如input select等等】
须要批改跟你我的项目匹配的几个中央，次要是table的options的参数 ：parseData【因为不同后端返回的json的key不太一样，须要按layui固定的格局去赋值】和 request：默认向后端传递分页参数命名【这个局部是向你的我的项目聚拢】 还有就是 排序局部，这个在监听排序事件外面 【如上图标记】，这点也是能渠道前端的排序字段和形式 至于怎么向后端传参的，能够依据后端设置的来。这点跟request一样 ，是依据后端配置而不是依据layui的格局来制订的。
搜寻区的id设置的起因是，初始化和前面搜寻都须要对立组装参数，如果这点也须要每次都写一遍，不封装那要写累死，尤其是那种死心眼的开发者，一个个获取input 和select值的这种行为。
reset 办法:
这里用到了表格渲染，因为重置了参数 单选框 多选框 下拉框的体现还是原来的样子，须要从新渲染下。为了辨别开区域 这里只渲染搜寻区的控件。
当reset带了参数时，这部分参数注入到搜寻参数外面去。参数格局为：{}.
3. 残缺的js：
var LayDataTable = (function() {
var table;
var l_options;
var l_searchConfig;
var currentTable;
var $;
var whereData={};//搜寻条件
var form;
function init(_options, headEvenFun = null, rowEvenFun = null, searchConfig = {}) {
var _this = this;
//设置默认项
_options.elem = _options.elem || "";
_options.height = _options.height || 700;
//默认分页配置
if (typeof(_options.page) != "boolean") {
_options.page = _options.page ||{};
_options.page = Object.assign({
first: '首页',
prev: '上一页',
next: '下一页',
last: '尾页',
groups: '6',
layout: ['count', 'first', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
theme: '#fe0627'
},_options.page);
}
var options = Object.assign({
title: '',
defaultToolbar: ['filter', 'print'],
limits: [10, 50, 100],
limit: 10, //每页默认显示的数量
skin: 'row', //表格格调
even: typeof(_options.even)=='boolean'?_options.even:true, //开启隔行背景
size: 'lg', //小尺寸的表格
text:{
none: '暂无相干数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
},
parseData:function(res) { //res 即为原始返回的数据
return {
//这部分最初应用全局配置 依据理论业务批改
"code": res.status, //解析接口状态
"msg": res.message, //解析提醒文本
"count": res.total, //解析数据长度
"data": res.data.item //解析数据列表
};
},
request:{ //默认申请参数 依据理论业务批改
pageName: 'start', //页码的参数名称，默认：page
limitName: 'length' //每页数据量的参数名，默认：limit
}
},_options);
var elemDom = document.getElementById(options.elem.substr(1));
var tableFilter = elemDom.getAttribute("lay-filter");
l_options = options;
//搜寻条件
if (searchConfig) {
l_searchConfig =searchConfig;
}
layui.use(['table', 'jquery','form'], function() {
table = layui.table;
$ =layui.$;
setParams();
l_options.where = whereData;
//第一个实例
currentTable = table.render(options);
form= layui.form;
//头工具栏事件
if (typeof(headEvenFun) == "function") {
table.on('toolbar(' + tableFilter + ')', function(obj) {
headEvenFun(table.checkStatus(obj.config.id), obj.event);
});
}
//监听行工具事件
if (typeof(rowEvenFun) == "function") {
table.on('tool(' + tableFilter + ')', function(obj) {
rowEvenFun(obj);
});
}
//监听排序事件
table.on('sort('+l_options.elem.replace("#","")+')', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
table.reload(l_options.elem.replace("#",""), {
initSort: obj //记录初始排序，如果不设的话，将无奈标记表头的排序状态。
,where: { //申请参数 （留神：这外面的参数可任意定义，并非上面固定的格局）---》依据理论业务批改
field: obj.field //排序字段
,order: obj.type //排序形式
}
});
});
});
}
function search() { //搜寻的办法
setParams();
l_options.where = whereData;
currentTable.reload(l_options);
}
function getTable() { //获取table
return table;
}
function setParams(){// 设置参数
var type;
var searchId = typeof(l_searchConfig)==='object'?l_searchConfig.searchId:l_searchConfig;
$("#"+searchId+" input,#"+searchId+" select").each(function(ind, item) {
type = $(item).attr("type");
if ($(item).attr("name")) {
if (type == 'radio' || type == 'checkbox') {
whereData[$(item).attr("name")] = $("input[name='" + $(item).attr("name") + "']:checked").val() || '';
} else {
whereData[$(item).attr("name")] = $(item).val() || '';
}
}
})
}
function reset(whereParams) { //重置搜寻
var type;
whereData = {};
l_options.where={};
var searchId = typeof(l_searchConfig)==='object'?l_searchConfig.searchId:l_searchConfig;
$("#"+searchId+" input,#"+searchId+" select").each(function(ind, item) {
type = $(item).attr("type");
if ($(item).attr("name")) {
if (type == 'hidden') {
whereData[$(item).attr("name")] = $(item).val() || '';
} else if (type == 'radio' || type == 'checkbox') {
$(item).attr("checked", false);
whereData[$(item).attr("name")] = '';
} else {
whereData[$(item).attr("name")] = '';
$(item).val("");
}
}
});
Object.assign(whereData,whereParams||{}) ;
//部分刷新 搜寻区 最顶部div 的 class="layui-form"
//须要搭配 lay-filter,并且lay-filter的值
//肯定要与 seachConfig外面searchId的值一样
form.render('select',searchId);
form.render('radio',searchId);
form.render('checkbox',searchId);
currentTable.reload({
where: whereData,
page:{
curr: 1//从新从第 1 页开始
}
});
}
//对象办法 [我的了解]
return function() {
this.init = init;
this.search = search; //搜寻
this.reset = reset; //重置搜寻
this.getTable = getTable;
}
})();
//属性使您有能力向对象增加属性和办法
LayDataTable.prototype = {
}
源码
本文来源于：程序员ken，专属平台有csdn、思否(SegmentFault)、 简书、 开源中国(oschina)、掘金，转载请注明出处。
发表回复