最近一直用layui進行頁面的重構，這個框架十分適合我們后台人員開發。簡單易用，但是layui本身不支持雙向綁定，所以很多情況下，我們在支持動態的控件加載時，需要反復刷新。這里我自己封裝了一個common模塊。話不多說，直接上代碼。
//Author :chenzihao
//Date :2018/8/27
//Discrption:自定義公共方法（持續擴充ing）
layui.define(['layer', 'form', 'table', 'jquery'], function (exports) {
//內置laydui對象
var $ = layui.$;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var extend = {
select: function (obj) {
var url = obj.url,//請求數據源的url
data = obj.requestdata,//請求參數
type = obj.type ? obj.type : 'get',//請求方法
elemIds = obj.elemIds,//select元素集合（可以是單個字符串，或Array）
dataText = obj.dataText,//select選項的文本字段名
dataValue = obj.dataValue,//select選項的value字段名
otherOption = obj.otherOption,//其他選項
defaultValue = obj.defaultValue,//默認選項值
func = obj.selectFunc,//下拉框選項監聽事件
isAll = obj.isAll,//是否所有select綁定相同監聽事件
done = obj.done,//渲染完成執行事件
selectFilter = obj.selectFilter ? obj.selectFilter : obj.elemIds,//自定義的select filter,默認與elemIds同名 (可以是單個字符串，或Array)
isLocalRender = obj.isLocalRender ? obj.isLocalRender : false,//是否開啟局部刷新 默認不開啟
message = obj.errorMessage ? obj.message : "網絡異常",//請求異常的message
response = obj.response ? obj.response : {
statusName: 'code',
statusCode: 'success',
dataName: 'data',
msgName: 'message'
};//返回參數名配置
$.ajax({
url: url,
data: data,
type: type,
dataType: "JSON",
error: function (error) {
console.log("異常" + error);
layer.msg(message);
},
success: function (res) {
var result;
if (typeof (res) == 'string') {
result = JSON.parse(res);
}
else {
result = res;
}
if (result[response.statusName] != response.statusCode) {
layer.alert(result[response.msgName]);
}
var options;
if (result[response.dataName]) {
options = result[response.dataName];
}
else {
options = result.Data;
}
var template="";
//加載select的option集合
if (otherOption) {
template = otherOption;
}
for (var index in options) {
if (defaultValue && (options[index][dataValue] == defaultValue || options[index][dataText] == defaultValue)) {
template += "<option selected value='" + options[index][dataValue] + "'>" + options[index][dataText] + "</option>";
}
else {
template += "<option value='" + options[index][dataValue] + "'>" + options[index][dataText] + "</option>";
}
}
if (typeof (elemIds) == 'string') {
$("#" + elemIds).html(template);
}
else if (elemIds instanceof Array) {
for (var index in elemIds) {
$("#" + elemIds[index]).html(template);
}
}
//是否局部渲染
if (isLocalRender) {
if (typeof (selectFilter) == 'string') {
form.render('select', selectFilter);
}
else if (selectFilter instanceof Array) {
for (var index in selectFilter) {
form.render('select', selectFilter[index]);
}
}
}
else {
form.render('select');
}
//渲染完成事件
if (done) {
done();
}
//監聽select下拉選項事件
if (func) {
//多綁定事件
if (func instanceof Array) {
for (var index in func) {
//select同一個監聽事件(一個select，多個func，只綁定第一個func)
if (typeof (selectFilter) == 'string') {
form.on("select(" + selectFilter + ")", func[index]);
break;
}
//select不同的監聽 一 一對應
else if (selectFilter instanceof Array) {
form.on("select(" + selectFilter[index] + ")", func[index]);
}
}
}
//單綁定事件
else {
if (typeof (selectFilter) == 'string') {
form.on("select(" + selectFilter + ")", func);
}
else if (selectFilter instanceof Array) {
for (var index in selectFilter) {
if (isAll) {
form.on("select(" + selectFilter[index] + ")", func);
}
else {
form.on("select(" + selectFilter[index] + ")", func);
break;
}
}
}
}
//有默認選項 處罰select事件
if (defaultValue) {
//以默認值觸發監聽事件
if (typeof defaultValue != "string" || defaultValue.indexOf("index_", 0)==-1) {
if (func instanceof Array) {
for (var index in func) {
func[index]({ value: defaultValue });
}
}
else {
func({ value: defaultValue });
}
}
//以選項的某個選項來觸發監聽事件
else {
var valueIndex = defaultValue.substring(defaultValue.length - 1, defaultValue.length);
if (func instanceof Array) {
for (var index in func) {
func[index]({ value: options[valueIndex][dataValue] });
}
}
else {
func({ value: options[valueIndex][dataValue] });
}
}
}
}
}
});
},
table: function (obj) {
var url = obj.url,//數據源Url
tableId = obj.tableId,//渲染完table的Id
contentId = obj.contentId,//容器div的Id
tableFilter = obj.tableFilter ? obj.tableFilter : contentId,//test是table原始容器的屬性 lay-filter="對應的值",默認與Id相同
limits = obj.limits ? obj.limits : [10, 20, 50, 100, 200],//分頁參數 默認10, 20, 50, 100, 200
cols = obj.cols,//表頭及字段綁定
func = obj.doneFun,//表格渲染完回調函數
isPage = obj.isBackPage ? obj.isBackPage : false,//是否啟用后台分頁
toolBarEvent = obj.toolBarEvent,//頭部工具欄事件
sortEvent = obj.sortEvent,//排序切換事件
ckboxEvent = obj.ckboxEvent,//選框選擇事件
editEvent = obj.editEvent,//單元格編輯事件
toolEvent = obj.toolEvent,// 綁定行工具條事件
method = obj.method ? obj.method : 'post',//請求方式 默認post
where = obj.where ? obj.where : null,//請求額外參數
response = obj.response ? obj.response : {
statusName: 'code',
statusCode: 'success',
dataName: 'data',
countName: 'TotalPackageNum',
msgName: 'message'
},//返回參數名配置
request = obj.request ? obj.request : {
pageName: 'PageIndex',
limitName: 'PageSize'
};//請求參數名配置，默認PageIndex,PageSize
var option = {
id: tableId,
elem: '#' + contentId,
page: true,
limits: limits,
cols: cols,
done: func
};
if (isPage) {
option.method = method;
option.url = url;
option.where = where;
option.request = request;
option.response = response;
option.contentType = 'application/json';
option.loading = true;
}
else {
$.ajax({
url:url,
type: method,
data: where,
async:false,
contentType: 'application/json',
success: function (result) {
var data;
if (typeof (result) == 'string') {
data = JSON.parse(result);
}
else {
data = result;
}
if (data[response.statusName] == response.statusCode) {
option.data = data[response.dataName];
}
},
error: function (error) {
layer.msg("網路錯誤");
}
});
}
table.render(option);
if (toolBarEvent) {
table.on('toolbar(' + tableFilter + ')', toolBarEvent);
}
if (sortEvent) {
table.on('sort(' + tableFilter + ')', sortEvent);
}
if (ckboxEvent) {
table.on('checkbox(' + tableFilter + ')', ckboxEvent);
}
if (editEvent) {
table.on('edit(' + tableFilter + ')', editEvent);
}
if (toolEvent) {
table.on('tool(' + tableFilter + ')', toolEvent);
}
},
//獲取url中的參數
getQueryString: function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = decodeURI(window.options.search.substr(1)).match(reg);
if (r != null) return unescape(r[2]); return null;
},
//Url參數封裝成對象
convertUrlObj: function (url) {
var str;
if (url) {
str = url
}
else {
str = decodeURI(window.options.search.substr(1));
}
var keyValues = str.split('&');
var obj = {};
for (var index in keyValues) {
var keyValue = keyValues[index].split('=');
obj[keyValue[0]] = keyValue[1];
}
return obj;
},
//封裝form表單object
getFormObj: function (formId) {
var data = $("#" + formId).serializeArray();
var obj = {};
for (var key in data) {
obj[data[key].name] = data[key].value;
}
return obj;
}
};
// 錯誤彈出層
error: function (message) {
layer.open({
content: message,
icon: 2,
title: '錯誤提示'
});
},
//成功彈出層
success: function (message, func) {
layer.open({
content: message,
icon: 1,
yes: func
});
},
//二次確認框
confirm: function (message,func) {
layer.confirm(message, { icon: 3, title: '提示' }, function (index) {
func();
layer.close(index);
});
},
//文件下載(post無刷新)
downLoadFile: function (option) {
var method = option.method ? option.method : "post";
var $iframe = $('<iframe id="downFileFrame" name="" style="display:none;" scrolling="yes" noresize ></frame>');
var $form = $('<form method="' + method + '" action="' + option.url + '"></form>');
if (option.data) {
for (var key in option.data) {
$form.append('<input type="hidden" name="' + option.data[key].name + '" value="' + option.data[key].value + '"/>');
}
}
$iframe.append($form);
$(document.body).append($iframe);
$form[0].submit();
$iframe.remove();
}
exports('common', extend);
});
layui自定義模塊使用：
注意：這里我們的自定義模塊的文件最好和我們之后引入對象的名字一樣，這樣我們之后就不用指定文件。這里我的模塊叫common，文件也叫common.js。
自定義模塊的公用方法：
1.select下拉框渲染
用法：
//始發倉下拉框 common.select({ url: '/api/Common/GetUserLocation', elemIds: ['locationId', 'simpleLocationId'], dataValue: 'LocationId', dataText: 'Location', defaultValue: "index_0",//默認選項（可以是具體某個option的value或text） otherOption: "<option value=''>全部</option>",//額外選項 isLocalRender: true//開啟局部渲染 });
具體參數，請看common文件。這里支持局部渲染，前提是我們約定select標簽規范
上述紅框是開啟局部刷新的必須條件，lay-filter默認和id一個名，可以不傳。同時支持省市區三級聯動，在傳入id時，傳入一個id數組。監聽事件也可以是一個數組，可以選擇多個控件綁定一個監聽事件，或者一一對應的綁定。如下是三個省市區三級聯動：
//下拉框加載(省市區聯動) common.select({ url: "/api/Common/GetAllProvince", elemIds: ['provinceId', 'sourceProvinceId', 'targetProvinceId'], dataValue: 'RegionId', dataText: 'RegionName', defaultValue: "index_0", otherOption: "<option value=''>全部</option>", isLocalRender: true, selectFunc: [function (obj) {//簡單快遞規則 目的省聯動 目的城市 common.select({ url: '/api/Common/GetRegionListByParentId', elemIds: 'cityId', requestdata: { parentId: obj.value }, dataValue: 'RegionId', dataText: 'RegionName', defaultValue: "index_0", isLocalRender: true, otherOption: "<option value=''>全部</option>", selectFunc: function (obj) {//簡單快遞規則 目的城市聯動 目的縣區 common.select({ url: '/api/Common/GetRegionListByParentId', elemIds: 'districtId', requestdata: { parentId: obj.value }, dataValue: 'RegionId', dataText: 'RegionName', defaultValue: "index_0", isLocalRender: true, otherOption: "<option value=''>全部</option>" }); } }); }, function (obj) {//復雜快遞規則 始發省聯動 始發城市 common.select({ url: '/api/Common/GetRegionListByParentId', elemIds: 'sourceCityId', requestdata: { parentId: obj.value }, dataValue: 'RegionId', dataText: 'RegionName', isLocalRender: true, defaultValue: "index_0", otherOption: "<option value=''>全部</option>", selectFunc: function (obj) {//復雜快遞規則 始發城市聯動 始發區縣 common.select({ url: '/api/Common/GetRegionListByParentId', elemIds: 'sourceDistrictId', sourceCityId, requestdata: { parentId: obj.value }, dataValue: 'RegionId', dataText: 'RegionName', defaultValue: "index_0", otherOption: "<option value=''>全部</option>", isLocalRender: true }); } }); }, function (obj) {//復雜快遞規則 目的省聯動 目的城市 common.select({ url: '/api/Common/GetRegionListByParentId', elemIds: 'targetCityId', requestdata: { parentId: obj.value }, dataValue: 'RegionId', dataText: 'RegionName', isLocalRender: true, defaultValue: "index_0", otherOption: "<option value=''>全部</option>", selectFunc: function (obj) {//復雜快遞規則 目的城市聯動 目的縣區 common.select({ url: '/api/Common/GetRegionListByParentId', elemIds: 'targetDistrictId', requestdata: { parentId: obj.value }, dataValue: 'RegionId', dataText: 'RegionName', defaultValue: "index_0", otherOption: "<option value=''>全部</option>", isLocalRender: true }); } }); }] });
2.table的使用
這里你可以選擇用后台分頁，或者前台分頁，只用修改參數isBackPage。如果后台分頁的話，需要指定request參數，默認是：
你可以根據自己的需要去綁定后台字段。直接上用法吧：
//表頭數據列
var cols = [[
{ type: 'checkbox', align: 'center', style: 'top:7px', width: '5%' },
{ type: 'numbers', align: 'center', title: '編號', width: '10%', sort: true }
]];
//數據列表加載
common.table({
url: '../api/DeliveryCost/ExpressCostRulesList',
where: obj,
tableId: 'dataTable',
contentId: 'simpleList',
cols: cols,
isBackPage: true
});
3.一些公用方法
1.如果你需要表單提交，獲取表單內容而不是一個個$().val()去獲取，可以使用getFormObj()，傳入一個form的id，即可把表單封裝成一個object。
2.如果你從一個頁面傳入到另外一個頁面，如果參數比較少，或者想獲取某個指定參數，可以用getQueryString。如果是整個表單傳遞過去，你可以用convertUrlObj，他會將url的key=value參數封裝成一個
object。
3.convertUrlObj可以將url的key=value轉換成obj.
4.一些公用的彈出框，包括success，error ,confirm
5.無刷新文件下載。
以上是我在使用layui的時候一些小經驗，希望可以給一些朋友小小的幫助。自己記錄下來，也是一個學習的過程，慢慢積累。加油！