js外掛封裝方法(二)
阿新 • • 發佈:2020-12-18
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);