一個大神封裝的通用js
阿新 • • 發佈：2018-12-29
/**
* 通用js方法封裝處理
*/
(function ($) {
$.extend({
_treeTable: {},
_tree: {},
// 表格封裝處理
table: {
_option: {},
_params: {},
// 初始化表格
init: function(options) {
$.table._option = options;
$.table._params = $.common.isEmpty(options.queryParams) ? $.table.queryParams : options.queryParams;
_sortOrder = $.common.isEmpty(options.sortOrder) ? "asc" : options.sortOrder;
_sortName = $.common.isEmpty(options.sortName) ? "" : options.sortName;
$('#bootstrap-table').bootstrapTable({
url: options.url, // 請求後臺的URL（*）
contentType: "application/x-www-form-urlencoded", // 編碼型別
method: 'post', // 請求方式（*）
cache: false, // 是否使用快取
sortable: true, // 是否啟用排序
sortStable: true, // 設定為 true 將獲得穩定的排序
sortName: _sortName, // 排序列名稱
sortOrder: _sortOrder, // 排序方式 asc 或者 desc
pagination: $.common.visible(options.pagination), // 是否顯示分頁（*）
pageNumber: 1, // 初始化載入第一頁，預設第一頁
pageSize: 10, // 每頁的記錄行數（*）
pageList: [10, 25, 50], // 可供選擇的每頁的行數（*）
iconSize: 'outline', // 圖示大小：undefined預設的按鈕尺寸 xs超小按鈕sm小按鈕lg大按鈕
toolbar: '#toolbar', // 指定工作欄
sidePagination: "server", // 啟用服務端分頁
search: $.common.visible(options.search), // 是否顯示搜尋框功能
showRefresh: $.common.visible(options.showRefresh), // 是否顯示重新整理按鈕
showColumns: $.common.visible(options.showColumns), // 是否顯示隱藏某列下拉框
showToggle: $.common.visible(options.showToggle), // 是否顯示詳細檢視和列表檢視的切換按鈕
showExport: $.common.visible(options.showExport), // 是否支援匯出檔案
queryParams: $.table._params, // 傳遞引數（*）
columns: options.columns, // 顯示列資訊（*）
responseHandler: $.table.responseHandler // 回撥函式
});
},
// 查詢條件
queryParams: function(params) {
return {
// 傳遞引數查詢引數
pageSize: params.limit,
pageNum: params.offset / params.limit + 1,
searchValue: params.search,
orderByColumn: params.sort,
isAsc: params.order
};
},
// 請求獲取資料後處理回撥函式
responseHandler: function(res) {
if (res.code == 0) {
return { rows: res.rows, total: res.total };
} else {
$.modal.alertWarning(res.msg);
return { rows: [], total: 0 };
}
},
// 搜尋
search: function(formId) {
var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
var params = $("#bootstrap-table").bootstrapTable('getOptions');
params.queryParams = function(params) {
var search = {};
$.each($("#" + currentId).serializeArray(), function(i, field) {
search[field.name] = field.value;
});
search.pageSize = params.limit;
search.pageNum = params.offset / params.limit + 1;
search.searchValue = params.search;
search.orderByColumn = params.sort;
search.isAsc = params.order;
return search;
}
$("#bootstrap-table").bootstrapTable('refresh', params);
},
// 下載
exportExcel: function(formId) {
var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
$.modal.loading("正在匯出資料，請稍後...");
$.post($.table._option.exportUrl, $("#" + currentId).serializeArray(), function(result) {
if (result.code == web_status.SUCCESS) {
window.location.href = ctx + "common/download?fileName=" + result.msg + "&delete=" + true;
} else {
$.modal.alertError(result.msg);
}
$.modal.closeLoading();
});
},
// 重新整理
refresh: function() {
$("#bootstrap-table").bootstrapTable('refresh', {
url: $.table._option.url,
silent: true
});
},
// 查詢選中列值
selectColumns: function(column) {
return $.map($('#bootstrap-table').bootstrapTable('getSelections'), function (row) {
return row[column];
});
},
// 查詢選中首列值
selectFirstColumns: function() {
return $.map($('#bootstrap-table').bootstrapTable('getSelections'), function (row) {
return row[$.table._option.columns[1].field];
});
},
// 回顯資料字典
selectDictLabel: function(datas, value) {
var actions = [];
$.each(datas, function(index, dict) {
if (dict.dictValue == value) {
actions.push("<span class='badge badge-" + dict.listClass + "'>" + dict.dictLabel + "</span>");
return false;
}
});
return actions.join('');
}
},
// 表格樹封裝處理
treeTable: {
_option: {},
// 初始化表格
init: function(options) {
$.table._option = options;
var treeTable = $('#bootstrap-table').bootstrapTreeTable({
code : options.id, // 用於設定父子關係
parentCode : options.parentId, // 用於設定父子關係
type: 'get', // 請求方式（*）
url: options.url, // 請求後臺的URL（*）
ajaxParams : {}, // 請求資料的ajax的data屬性
expandColumn : '0', // 在哪一列上面顯示展開按鈕
striped : false, // 是否各行漸變色
bordered : true, // 是否顯示邊框
expandAll : $.common.visible(options.expandAll), // 是否全部展開
columns: options.columns
});
$._treeTable = treeTable;
},
// 條件查詢
search: function(formId) {
var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
var params = {};
$.each($("#" + currentId).serializeArray(), function(i, field) {
params[field.name] = field.value;
});
$._treeTable.bootstrapTreeTable('refresh', params);
},
// 重新整理
refresh: function() {
$._treeTable.bootstrapTreeTable('refresh');
},
},
// 表單封裝處理
form: {
// 表單重置
reset: function(formId) {
var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
$("#" + currentId)[0].reset();
},
// 獲取選中複選框項
selectCheckeds: function(name) {
var checkeds = "";
$('input:checkbox[name="' + name + '"]:checked').each(function(i) {
if (0 == i) {
checkeds = $(this).val();
} else {
checkeds += ("," + $(this).val());
}
});
return checkeds;
},
// 獲取選中下拉框項
selectSelects: function(name) {
var selects = "";
$('#' + name + ' option:selected').each(function (i) {
if (0 == i) {
selects = $(this).val();
} else {
selects += ("," + $(this).val());
}
});
return selects;
}
},
// 彈出層封裝處理
modal: {
// 顯示圖示
icon: function(type) {
var icon = "";
if (type == modal_status.WARNING) {
icon = 0;
} else if (type == modal_status.SUCCESS) {
icon = 1;
} else if (type == modal_status.FAIL) {
icon = 2;
} else {
icon = 3;
}
return icon;
},
// 訊息提示
msg: function(content, type) {
if (type != undefined) {
layer.msg(content, { icon: $.modal.icon(type), time: 1000, shift: 5 });
} else {
layer.msg(content);
}
},
// 錯誤訊息
msgError: function(content) {
$.modal.msg(content, modal_status.FAIL);
},
// 成功訊息
msgSuccess: function(content) {
$.modal.msg(content, modal_status.SUCCESS);
},
// 警告訊息
msgWarning: function(content) {
$.modal.msg(content, modal_status.WARNING);
},
// 彈出提示
alert: function(content, type) {
layer.alert(content, {
icon: $.modal.icon(type),
title: "系統提示",
btn: ['確認'],
btnclass: ['btn btn-primary'],
});
},
// 訊息提示並重新整理父窗體
msgReload: function(msg, type) {
layer.msg(msg, {
icon: $.modal.icon(type),
time: 500,
shade: [0.1, '#8F8F8F']
},
function() {
$.modal.reload();
});
},
// 錯誤提示
alertError: function(content) {
$.modal.alert(content, modal_status.FAIL);
},
// 成功提示
alertSuccess: function(content) {
$.modal.alert(content, modal_status.SUCCESS);
},
// 警告提示
alertWarning: function(content) {
$.modal.alert(content, modal_status.WARNING);
},
// 關閉窗體
close: function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
},
// 確認窗體
confirm: function (content, callBack) {
layer.confirm(content, {
icon: 3,
title: "系統提示",
btn: ['確認', '取消'],
btnclass: ['btn btn-primary', 'btn btn-danger'],
}, function (index) {
layer.close(index);
callBack(true);
});
},
// 彈出層指定寬度
open: function (title, url, width, height) {
//如果是移動端，就使用自適應大小彈窗
if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
width = 'auto';
height = 'auto';
}
if ($.common.isEmpty(title)) {
title = false;
};
if ($.common.isEmpty(url)) {
url = "/404.html";
};
if ($.common.isEmpty(width)) {
width = 800;
};
if ($.common.isEmpty(height)) {
height = ($(window).height() - 50);
};
layer.open({
type: 2,
area: [width + 'px', height + 'px'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: title,
content: url,
// 彈層外區域關閉
shadeClose: true
});
},
// 彈出層指定引數選項
openOptions: function (options) {
var _url = $.common.isEmpty(options.url) ? "/404.html" : options.url;
var _title = $.common.isEmpty(options.title) ? "系統視窗" : options.title;
var _width = $.common.isEmpty(options.width) ? "800" : options.width;
var _height = $.common.isEmpty(options.height) ? ($(window).height() - 50) : options.height;
layer.open({
type: 2,
maxmin: true,
shade: 0.3,
title: _title,
fix: false,
area: [_width + 'px', _height + 'px'],
content: _url,
shadeClose: true,
btn: ['<i class="fa fa-check"></i> 確認', '<i class="fa fa-close"></i> 關閉'],
yes: function (index, layero) {
options.callBack(index, layero)
}, cancel: function () {
return true;
}
});
},
// 彈出層全屏
openFull: function (title, url, width, height) {
//如果是移動端，就使用自適應大小彈窗
if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
width = 'auto';
height = 'auto';
}
if ($.common.isEmpty(title)) {
title = false;
};
if ($.common.isEmpty(url)) {
url = "/404.html";
};
if ($.common.isEmpty(width)) {
width = 800;
};
if ($.common.isEmpty(height)) {
height = ($(window).height() - 50);
};
var index = layer.open({
type: 2,
area: [width + 'px', height + 'px'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: title,
content: url,
// 彈層外區域關閉
shadeClose: true
});
layer.full(index);
},
// 開啟遮罩層
loading: function (message) {
$.blockUI({ message: '<div class="loaderbox"><div class="loading-activity"></div> ' + message + '</div>' });
},
// 關閉遮罩層
closeLoading: function () {
setTimeout(function(){
$.unblockUI();
}, 50);
},
// 重新載入
reload: function () {
parent.location.reload();
}
},
// 操作封裝處理
operate: {
// 提交資料
submit: function(url, type, dataType, data) {
$.modal.loading("正在處理中，請稍後...");
var config = {
url: url,
type: type,
dataType: dataType,
data: data,
success: function(result) {
$.operate.ajaxSuccess(result);
}
};
$.ajax(config)
},
// post請求傳輸
post: function(url, data) {
$.operate.submit(url, "post", "json", data);
},
// 刪除資訊
remove: function(id) {
$.modal.confirm("確定刪除該條" + $.table._option.modalName + "資訊嗎？", function() {
var url = $.common.isEmpty(id) ? $.table._option.removeUrl : $.table._option.removeUrl.replace("{id}", id);
var data = { "ids": id };
$.operate.submit(url, "post", "json", data);
});
},
// 批量刪除資訊
removeAll: function() {
var rows = $.common.isEmpty($.table._option.id) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.id);
if (rows.length == 0) {
$.modal.alertWarning("請至少選擇一條記錄");
return;
}
$.modal.confirm("確認要刪除選中的" + rows.length + "條資料嗎?", function() {
var url = $.table._option.removeUrl;
var data = { "ids": rows.join() };
$.operate.submit(url, "post", "json", data);
});
},
// 新增資訊
add: function(id) {
var url = $.common.isEmpty(id) ? $.table._option.createUrl : $.table._option.createUrl.replace("{id}", id);
$.modal.open("新增" + $.table._option.modalName, url);
},
// 修改資訊
edit: function(id) {
var url = $.table._option.updateUrl.replace("{id}", id);
$.modal.open("修改" + $.table._option.modalName, url);
},
// 新增資訊 全屏
addFull: function(id) {
var url = $.common.isEmpty(id) ? $.table._option.createUrl : $.table._option.createUrl.replace("{id}", id);
$.modal.openFull("新增" + $.table._option.modalName, url);
},
// 修改資訊 全屏
editFull: function(id) {
var url = $.table._option.updateUrl.replace("{id}", id);
$.modal.openFull("修改" + $.table._option.modalName, url);
},
// 儲存資訊
save: function(url, data) {
$.modal.loading("正在處理中，請稍後...");
var config = {
url: url,
type: "post",
dataType: "json",
data: data,
success: function(result) {
$.operate.saveSuccess(result);
}
};
$.ajax(config)
},
// 儲存結果彈出msg重新整理table表格
ajaxSuccess: function (result) {
if (result.code == web_status.SUCCESS) {
$.modal.msgSuccess(result.msg);
$.table.refresh();
} else {
$.modal.alertError(result.msg);
}
$.modal.closeLoading();
},
// 儲存結果提示msg
saveSuccess: function (result) {
if (result.code == web_status.SUCCESS) {
$.modal.msgReload("儲存成功,正在重新整理資料請稍後……", modal_status.SUCCESS);
} else {
$.modal.alertError(result.msg);
}
$.modal.closeLoading();
}
},
// 校驗封裝處理
validate: {
// 判斷返回標識是否唯一 false 不存在 true 存在
unique: function (value) {
if (value == "0") {
return true;
}
return false;
}
},
// 樹外掛封裝處理
tree: {
_option: {},
_lastValue: {},
// 初始化樹結構
init: function(options) {
$.tree._option = options;
// 屬性ID
var _id = $.common.isEmpty(options.id) ? "tree" : options.id;
// 展開等級節點
var _expandLevel = $.common.isEmpty(options.expandLevel) ? 0 : options.expandLevel;
// 樹結構初始化載入
var setting = {
check: options.check,
view: { selectedMulti: false, nameIsHTML: true },
data: { key: { title: "title" }, simpleData: { enable: true } },
callback: { onClick: options.onClick }
};
$.get(options.url, function(data) {
var treeName = $("#treeName").val();
var treeId = $("#treeId").val();
tree = $.fn.zTree.init($("#" + _id), setting, data);
$._tree = tree;
// 展開第一級節點
var nodes = tree.getNodesByParam("level", 0);
for (var i = 0; i < nodes.length; i++) {
if(_expandLevel > 0) {
tree.expandNode(nodes[i], true, false, false);
}
$.tree.selectByIdName(treeId, treeName, nodes[i]);
}
// 展開第二級節點
nodes = tree.getNodesByParam("level", 1);
for (var i = 0; i < nodes.length; i++) {
if(_expandLevel > 1) {
tree.expandNode(nodes[i], true, false, false);
}
$.tree.selectByIdName(treeId, treeName, nodes[i]);
}
// 展開第三級節點
nodes = tree.getNodesByParam("level", 2);
for (var i = 0; i < nodes.length; i++) {
if(_expandLevel > 2) {
tree.expandNode(nodes[i], true, false, false);
}
$.tree.selectByIdName(treeId, treeName, nodes[i]);
}
}, null, null, "正在載入，請稍後...");
},
// 搜尋節點
searchNode: function() {
// 取得輸入的關鍵字的值
var value = $.common.trim($("#keyword").val());
if ($.tree._lastValue === value) {
return;
}
// 儲存最後一次搜尋名稱
$.tree._lastValue = value;
var nodes = $._tree.getNodes();
// 如果要查空字串，就退出不查了。
if (value == "") {
$.tree.showAllNode(nodes);
return;
}
$.tree.hideAllNode(nodes);
// 根據搜尋值模糊匹配
$.tree.updateNodes($._tree.getNodesByParamFuzzy("name", value));
},
// 根據Id和Name選中指定節點
selectByIdName: function(treeId, treeName, node) {
if ($.common.isNotEmpty(treeName) && $.common.isNotEmpty(treeId)) {
if (treeId == node.id && treeName == node.name) {
$._tree.selectNode(node, true);
}
}
},
// 顯示所有節點
showAllNode: function(nodes) {
nodes = $._tree.transformToArray(nodes);
for (var i = nodes.length - 1; i >= 0; i--) {
if (nodes[i].getParentNode() != null) {
$._tree.expandNode(nodes[i], true, false, false, false);
} else {
$._tree.expandNode(nodes[i], true, true, false, false);
}
$._tree.showNode(nodes[i]);
$.tree.showAllNode(nodes[i].children);
}
},
// 隱藏所有節點
hideAllNode: function(nodes) {
var tree = $.fn.zTree.getZTreeObj("tree");
var nodes = $._tree.transformToArray(nodes);
for (var i = nodes.length - 1; i >= 0; i--) {
$._tree.hideNode(nodes[i]);
}
},
// 顯示所有父節點
showParent: function(treeNode) {
var parentNode;
while ((parentNode = treeNode.getParentNode()) != null) {
$._tree.showNode(parentNode);
$._tree.expandNode(parentNode, true, false, false);
treeNode = parentNode;
}
},
// 顯示所有孩子節點
showChildren: function(treeNode) {
if (treeNode.isParent) {
for (var idx in treeNode.children) {
var node = treeNode.children[idx];
$._tree.showNode(node);
$.tree.showChildren(node);
}
}
},
// 更新節點狀態
updateNodes: function(nodeList) {
$._tree.showNodes(nodeList);
for (var i = 0, l = nodeList.length; i < l; i++) {
var treeNode = nodeList[i];
$.tree.showChildren(treeNode);
$.tree.showParent(treeNode)
}
},
// 獲取當前被勾選集合
getCheckedNodes: function(column) {
var _column = $.common.isEmpty(column) ? "id" : column;
var nodes = $._tree.getCheckedNodes(true);
return $.map(nodes, function (row) {
return row[_column];
}).join();
},
// 不允許根父節點選擇
notAllowParents: function(_tree) {
var nodes = _tree.getSelectedNodes();
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].level == 0) {
$.modal.msgError("不能選擇根節點（" + nodes[i].name + "）");
return false;
}
if (nodes[i].isParent) {
$.modal.msgError("不能選擇父節點（" + nodes[i].name + "）");
return false;
}
}
return true;
},
// 隱藏/顯示搜尋欄
toggleSearch: function() {
$('#search').slideToggle(200);
$('#btnShow').toggle();
$('#btnHide').toggle();
$('#keyword').focus();
},
// 摺疊
collapse: function() {
$._tree.expandAll(false);
},
// 展開
expand: function() {
$._tree.expandAll(true);
}
},
// 通用方法封裝處理
common: {
// 判斷字串是否為空
isEmpty: function (value) {
if (value == null || this.trim(value) == "") {
return true;
}
return false;
},
// 判斷一個字串是否為非空串
isNotEmpty: function (value) {
return !$.common.isEmpty(value);
},
// 是否顯示資料 為空預設為顯示
visible: function (value) {
if ($.common.isEmpty(value) || value == true) {
return true;
}
return false;
},
// 空格擷取
trim: function (value) {
if (value == null) {
return "";
}
return value.toString().replace(/(^\s*)|(\s*$)|\r|\n/g, "");
},
// 指定隨機數返回
random: function (min, max) {
return Math.floor((Math.random() * max) + min);
}
}
});
})(jQuery);
/** 訊息狀態碼 */
web_status = {
SUCCESS: 0,
FAIL: 500
};
/** 彈窗狀態碼 */
modal_status = {
SUCCESS: "success",
FAIL: "error",
WARNING: "warning"
};
$(function() {
// select2複選框事件繫結
if ($.fn.select2 !== undefined) {
$("select.form-control:not(.noselect2)").each(function () {
$(this).select2().on("change", function () {
$(this).valid();
})
})
}
// checkbox 事件繫結
if ($(".check-box").length > 0) {
$(".check-box").iCheck({
checkboxClass: 'icheckbox-blue',
radioClass: 'iradio-blue',
})
}
// radio 事件繫結
if ($(".radio-box").length > 0) {
$(".radio-box").iCheck({
checkboxClass: 'icheckbox-blue',
radioClass: 'iradio-blue',
})
}
// laydate 時間控制元件繫結
if ($(".select-time").length > 0) {
layui.use('laydate', function() {
var laydate = layui.laydate;
laydate.render({ elem: '#startTime', theme: 'molv' });
laydate.render({ elem: '#endTime', theme: 'molv' });
});
}
// tree 關鍵字搜尋繫結
if ($("#keyword").length > 0) {
$("#keyword").bind("focus", function focusKey(e) {
if ($("#keyword").hasClass("empty")) {
$("#keyword").removeClass("empty");
}
}).bind("blur", function blurKey(e) {
if ($("#keyword").val() === "") {
$("#keyword").addClass("empty");
}
$.tree.searchNode(e);
}).bind("input propertychange", $.tree.searchNode);
}
});
/** 建立選項卡 */
function createMenuItem(dataUrl, menuName) {
dataIndex = $.common.random(1,100),
flag = true;
if (dataUrl == undefined || $.trim(dataUrl).length