jquery插件封装，例子为封装一个定版功能的弹窗
/**
* 定版通用弹窗插件
* Lixn
* 2020/03/18
*/
(function ($) {
window.$.fixVersion = function () {
var html = '<div id="[Id]" align="center" class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel">' +
'<div class="modal-dialog" style="width:500px">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
'<h5 class="modal-title" id="modalLabel" style="text-align:center">[Title]</h5>' +
'</div>' +
'<div class="modal-body">' +
'<form id="fixversion_form_pop">' +
'<table align="center" style="width:100%" border="0" cellspacing="0" cellpadding="0" '+
'class="table table-bordered tableModal">' +
'<tr>'+
'<input id="id" type="hidden" />'+
'<td class="input-right">任务编码：</td>'+
'<td class="input-left">'+
'<div class="td-index">'+
'<select id="taskCodeInPop" class="form-control" data-inputid="taskCode"' +
'data-validate="v.required"'+
'data-name="taskCodeInPop" data-type="0" >'+
'</select>'+
'</div>'+
'</td> '+
'</tr>'+
'<tr>' +
'<td class="input-right">定版类型：</td>' +
'<td class="input-left">' +
'<div class="td-index">' +
'<select id="versionTable" class="form-control not-clear" validate="v.required" disabled></select>' +
'</div>' +
'</td>' +
'</tr>' +
'<tr>' +
'<td class="input-right">定版编码：</td>' +
'<td class="input-left">' +
'<div class="td-index">' +
'<input type="text" value="[versionKey1]" id="versionKey1" class="form-control not-clear" validate="v.required" readonly>' +
'</div>' +
'</td>' +
'</tr>' +
'<tr>' +
'<td class="input-right">定版描述：</td>' +
'<td class="input-left">' +
'<div class="td-index">' +
'<input type="text" value="[versionKey1Desc]" id="versionKey1Desc" class="form-control not-clear" validate="v.required" readonly>' +
'</div>' +
'</td>' +
'</tr>' +
'</table>' +
'</form>'+
'</div>' +
'<div class="modal-footer" style="text-align:center;">' +
'<button type="button" class="btn btn_f fixvok" style="margin-right:10px;">[BtnOk]</button>' +
'<button type="button" class="btn btn_s cancel" data-dismiss="modal">[BtnCancel]</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
// var btnHtml = '<button id="[BtnId]" class="btn_t" type="button" data-toggle="modal" data-target="#[Id]"'+'data-whichbtn="update">定版</button>'; //弹窗按钮
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var fixeditForm = '#fixversion_form_pop'; //表单id
var btnId = 'fixVersion'; //按钮id
var generateId = function () {
var date = new Date();
return 'operateFixVersion_modal';
}
var init = function (options) {
options = $.extend({}, {
title: "定版",
btnok: "定版",
btncl: "返回",
table: "#table_app",
btnDiv: ".sky-btn-group", //放定版按钮的div
id: "id",
versionKey1: "", //定版编码字段
versionKey1Desc: "", //定版描述字段
versionTable: "", //定版类型
width: 400,
auto: false
}, options || {});
var modalId = generateId(); //获取弹窗id
// var contentBtn = btnHtml.replace(reg, function (node, key) {
// return {
// Id: modalId,
// BtnId: btnId
// }[key];
// });
// 向页面中追加代码
// if($(options.btnDiv).find('#'+btnId).length == 0){
// $(options.btnDiv).append(contentBtn);
// }
var content = html.replace(reg, function (node, key) {
return {
Id: modalId,
Title: options.title,
BtnOk: options.btnok,
BtnCancel: options.btncl,
}[key];
});
// 向页面中追加代码
if($('#'+modalId).length == 0){
$('body').append(content);
}
// 弹窗显示
$('#' + modalId).on('show.bs.modal', function (e) {
var selRow = $(options.table).bootstrapTable("getSelections");
if (selRow.length < 1) {
$.msg.alert("请选择一条数据");
return false;
}else{
initVlidate(fixeditForm);/* 初始化必输项 */
//[版本类型]初始化
var urlOption = serviceInfo.DATA00027.url;//选项代码查询接口
initSelectWithUrl(fixeditForm+' #versionTable', 'optionValue', 'optionDesc', urlOption, { "optionCode": "versionTable" },'', true);
//[任务编码]初始化
var urlTask = serviceInfo.COMP4080009.url;//选项代码查询接口
initJoinSelect(urlTask, '#taskCodeInPop', getKeyNameForTask, '', '', true);
taskdata = getRenderData(urlTask).rows;
var flag = false;
$.each(taskdata, function(i, item){
if(item.isDefault == '1'){ //默认值
flag = true;
selectInitialValue('#taskCodeInPop', i); //系统赋初值
return false;
}
});
if(!flag){
selectInitialValue('#taskCodeInPop', 0); //系统赋初值
}
//[定版类型]
$('#'+modalId+' #versionTable').val(options.versionTable);
$('#'+modalId+' #id').val(selRow[0][options.id]); //id
$('#'+modalId+' #versionKey1').val(selRow[0][options.versionKey1]); //定版编码
$('#'+modalId+' #versionKey1Desc').val(selRow[0][options.versionKey1Desc]); //定版描述
}
}).on('hide.bs.modal', function (e){
resetFrom(fixeditForm);
});
$('#' + modalId).draggable();//self def
return modalId;
}
//设置选项列表[任务编码]返回的key-name
var getKeyNameForTask = function(data, i) {
keyName = {
'key': data.rows[i].taskCode,
'name': data.rows[i].taskName
};
return keyName;
}
return {
define: function (options) {
if (typeof options == 'string') {
if(options.indexOf("登录超时") > 0){
return;
}
options = {
versionKey1: options.versionKey1,
versionKey1Desc: options.versionKey1Desc,
versionTable: options.versionTable
};
}
var id = init(options);
var modal = $('#' + id);
// 点击确定
if (options.callback && options.callback instanceof Function) {
modal.find('.fixvok').click(function () {
options.callback()
})
}else{
modal.find('.fixvok').click(function () {
//验证合法性
if (!vlidate($(fixeditForm))) {
return;
}
var paramJson = getEditParamJson(fixeditForm);
baseAjax(serverUrl + serviceInfo.VERS0000001.url,
JSON.stringify(paramJson), function (data) {
if (data && "0" === data.resCode) {
$.msg.alert(data.resMsg).on(function () {
appTable1.refreshTable();
modal.modal('hide');
});
} else {
if (data && data.resMsg != undefined) {
$.msg.alert(data.resMsg);
}
}
});
});
}
return {
id: id,
on: function (callback) {
if (callback && callback instanceof Function) {
modal.find('.fixvok').click(function () {
callback(true);
});
}
},
hide: function (callback) {
if (callback && callback instanceof Function) {
modal.on('hide.bs.modal', function (e) {
callback(e);
});
}
}
};
}
}
}();
})(jQuery);使用方法
// 定版
$.fixVersion.define({
versionKey1: 'msrvCode', //定版编码字段
versionKey1Desc: 'msrvName', //定版描述字段
versionTable: versionConst.tp4001 //定版类型
})抽出简洁版大框
/**
* 定版通用弹窗插件
* Lixn
* 2020/03/18
*/
(function ($) {
window.$.fixVersion = function () {
var html = '<div id="[Id]">'+
'<h1>[Title]</h1>'+
'<h1>……</h1>'+
'</div>';
//匹配[]的正则
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var generateId = function () {
return 'operateFixVersion_modal';
}
var init = function (options) {
// 参数
options = $.extend({}, {
title: "定版",
btnok: "定版",
btncl: "返回",
table: "#table_app",
id: "id",
versionKey1: "", //定版编码字段
versionKey1Desc: "", //定版描述字段
versionTable: "", //定版类型
width: 400,
auto: false
}, options || {});
var modalId = generateId(); //获取弹窗id
// 正则替换参数
var content = html.replace(reg, function (node, key) {
return {
Id: modalId,
Title: options.title,
BtnOk: options.btnok,
BtnCancel: options.btncl,
}[key];
});
// 向页面中追加代码
if($('#'+modalId).length == 0){
$('body').append(content);
}
// 弹窗显示
$('#' + modalId).on('show.bs.modal', function (e) {
// ……
}).on('hide.bs.modal', function (e){
//……
});
$('#' + modalId).draggable();//self def
return modalId;
}
return {
define: function (options) {
var id = init(options); //初始化
var modal = $('#' + id);
// 点击确定
if (options.callback && options.callback instanceof Function) {
modal.find('.fixvok').click(function () {
options.callback()
})
}else{
modal.find('.fixvok').click(function () {
//……
});
}
return {
id: id,
on: function (callback) {
if (callback && callback instanceof Function) {
modal.find('.fixvok').click(function () {
callback(true);
});
}
},
hide: function (callback) {
if (callback && callback instanceof Function) {
modal.on('hide.bs.modal', function (e) {
callback(e);
});
}
}
};
}
}
}();
})(jQuery);
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
