JavaScript頁面模版化配置實(shí)戰(zhàn)詳解
更新時(shí)間：2025年08月14日 08:55:57 作者：EF@蛐蛐堂
JavaScript模塊化是一種將代碼分割成獨(dú)立、可復(fù)用的單元（模塊）的方法,旨在提高代碼的可維護(hù)性、可重用性和可擴(kuò)展性,這篇文章主要介紹了JavaScript頁面模版化配置的相關(guān)資料,需要的朋友可以參考下
需求
實(shí)現(xiàn)可編輯表格和表單的動(dòng)態(tài)配置，即動(dòng)態(tài)獲取頁面顯示的元素并通過配置實(shí)現(xiàn)對后端讀取數(shù)據(jù)匹配字段、label名稱、元素類型、關(guān)聯(lián)數(shù)據(jù)源、匹配方式、狀態(tài)、默認(rèn)值等屬性的控制。
需注意：
1、對于有聯(lián)動(dòng)和有特殊操作的復(fù)雜邏輯元素匹配為靜態(tài)方式，用字段key控制仍然使用“靜態(tài)頁面模版”的代碼邏輯。
2、配置靜態(tài)方式的元素依然可以匹配一些動(dòng)態(tài)屬性，如寬度、狀態(tài)、label等
3、根據(jù)配置的狀態(tài)，動(dòng)態(tài)添加表單驗(yàn)證
名詞解析
1、動(dòng)態(tài)模版：獲取到j(luò)son類型的頁面元素及表現(xiàn)形式集合，通過它可以組成新dom。
2、靜態(tài)模版：固定在原模版頁里的dom結(jié)構(gòu)，匹配固定元素、樣式、后端字段接口、和邏輯操作
3、匹配字段key：原靜態(tài)頁面里元素的id；及保存或讀取時(shí)后臺(tái)對應(yīng)的字段名
4、元素類型：多為form元素類型（input、select等）、自定義的獲取信息組件（穿梭框、復(fù)雜表格選擇器等）
5、關(guān)聯(lián)數(shù)據(jù)源：元素為下拉列表時(shí)列表讀取接口地址
6、匹配方式：動(dòng)態(tài)，使用動(dòng)態(tài)模版中提供的各種條件構(gòu)成元素和交互邏輯；靜態(tài)，使用原靜態(tài)頁中的元素和交互邏輯
處理分析
1、拿到模版json，為空，（代碼沒有動(dòng)態(tài)模版）使用原靜態(tài)模版的dom；不為空，遍歷json里的屬性生成新的dom結(jié)構(gòu)；
2、遍歷新的dom結(jié)構(gòu)，對比json中的屬性匹配相應(yīng)的樣式和交互邏輯，生成新模版頁
3、讀取數(shù)據(jù)，顯示到新的頁面
4、編寫新的驗(yàn)證規(guī)則
首先配置方式分為兩種：
1、可編輯的表格
2、表單
3、純展示類的表格和表單（這個(gè)比較簡單，不寫了）
實(shí)施步驟
一、可編輯表格
靜態(tài)模版是easyui的edatagrid，動(dòng)態(tài)模版延用組件，只是將columns的配置改為動(dòng)態(tài)模版獲取。
1、編寫函數(shù)獲取模版
function getPageItemListForEdit(resId, firstObj, resName, oldColumns) {
var resultsTemp = null;
$.ajax({
url: 'pageModel.queryPageItemListByResId.action?resId=' + resId,
type: 'POST',
async: false,
success: function (retData) {
var itemList = retData.data;
resultsTemp = getColumnArrEdit(itemList, firstObj, resId, oldColumns);
}
});
return resultsTemp;
}2、處理模版信息生成新的columns，根據(jù)匹配方式，自動(dòng)適配動(dòng)態(tài)模版和原靜態(tài)模版元素
function getColumnArrEdit(itemList, firstObj, resId, oldList) {
var align = getAlign();
var itemArr = new Array();
if (itemList != null && itemList.length > 0) {
blArrayIndex = 0;
if (firstObj != null) {
itemArr.push(firstObj);
}
for (var i = 0; i < itemList.length; i++) {
var oldObj = null;
var obj = itemList[i];
var code = obj.ITEM_CODE;//PAGE_PROPERTY_ID
try{
if (oldList && (typeof oldList == 'object')) {
oldObj = oldList.find(itemOld => itemOld.field === obj.ITEM_CODE);
}
}catch (e) {
}
var name = obj.PAGE_ITEM_NAME;
var width = obj.WIDTH;
var MUTI_TEXT = obj.MUTI_TEXT;
var state = obj.STATE;//0編輯，1必填，2瀏覽
var defaultVal = obj.DEFAULT_VAL;
var visitable = obj.VISITABLE;
if (visitable == '1') {//不可見
continue;
}
if (width == null || width == 0) {
width = 100;
}
var type = obj.PAGE_ITEM_TYPE;
var codeRes = obj.CODE_RES;
var itemObj = new Object();
var editor = new Object();
var options = new Object();
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
text: '清空',
handler: function (target) {
$(target).datebox('setValue', '').datebox('hidePanel');
}
});
itemObj.POSITION_TYPE = obj.POSITION_TYPE;
itemObj.APPLICATION_METHOD = obj.APPLICATION_METHOD;
itemObj.field = code;
itemObj.title = name;
itemObj.align = align;
itemObj.width = width;
itemObj.sortable = true;
//添加（表頭提示）
itemObj.info = obj.INFO;
itemObj.hasDefaultVal = defaultVal;
itemObj.editor = editor;
itemObj.editor.options = options;
if (itemObj.APPLICATION_METHOD && itemObj.APPLICATION_METHOD != '1' && oldObj) {
if ('1' == state) {
itemObj.editor = oldObj.editor;
itemObj.editor.options ? (itemObj.editor.options.required = true) : itemObj.editor.options = {required: true};
} else if ('0' == state) {
itemObj.editor = oldObj.editor;
itemObj.editor.options ? (itemObj.editor.options.required = false) : itemObj.editor.options = {required: false};
}
itemObj.formatter = oldObj.formatter;
} else {
if (type == '2') {//日期型
if ('1' == state || '0' == state) {
itemObj.editor.type = 'datebox';
itemObj.editor.options.buttons = buttons;
if ('1' == state) {
itemObj.editor.options.required = true;
itemObj.editor.options.editable = false;
} else {
itemObj.editor.options.required = false;
itemObj.editor.options.editable = false;
}
}
itemObj.formatter = function (value, rowData, rowIndex) {
if (value != null && value != '' && value.length >= 10) {
value = value.substring(0, 10);
}
return value;
}
}
else if (type == '4') {//下拉列表
codeBlArray.push(codeRes);
if ('1' == state || '0' == state) {
itemObj.editor.type = 'combobox';
if ('1' == state) {
itemObj.editor.options.required = true;
} else {
itemObj.editor.options.required = false;
}
itemObj.editor.options.data = getPcodeListEdit(codeBlArray[blArrayIndex]);
itemObj.editor.options.valueField = 'id';
itemObj.editor.options.textField = 'text';
itemObj.editor.options.editable = false;
}
}
else if (type == '5') {
if ('1' == state || '0' == state) {
itemObj.editor = {type: 'numberbox', options: {required: ('1' == state ? true : false)}};
itemObj.formatter = function (value, rowData, rowIndex) {
var val = !value || value == 'null' || value == '' ? '' : parseInt(value);
return val;
}
}
}
else if (type == '7') {
if ('1' == state || '0' == state) {
itemObj.editor = {
type: 'numberbox',
options: {required: ('1' == state ? true : false), precision: 1}
};
itemObj.formatter = function (value, rowData, rowIndex) {
var val = !value || value == 'null' || value == '' ? '' : Number(value).toFixed(1);
return val;
}
}
}
else {
if ('1' == state || '0' == state) {
itemObj.editor.type = 'textbox';
if ('1' == MUTI_TEXT) {
itemObj.editor.type = 'textarea';
itemObj.formatter = function (value, rowData, rowIndex) {
if (value != null) {
value = myReplaceCommon(value, '\n', '
');
return value;
}
return "";
}
}
if ('1' == state) {
itemObj.editor.options.required = true;
} else {
itemObj.editor.options.required = false;
}
}
}
}
itemArr.push(itemObj);
}
}
itemArrMy = itemArr;
return itemArr;
}3、使用easyui的edatagrid組件初始化表格，并讀取數(shù)據(jù)賦值
注意：
（1）排查靜態(tài)模版中特殊處理邏輯的列是否都設(shè)置成了靜態(tài)模式，并且與后端字段id匹配
（2）遍歷靜態(tài)模版columns，排查是否有動(dòng)態(tài)模版中不存在的，用于存儲(chǔ)數(shù)據(jù)的隱藏列，將其添加到新columns
$('#tableId').edatagrid({
url:'tableData_url',
pagination:false,
pagePosition: 'top',
rownumbers:true,
fitColumns : false,
fit:true,
striped : true,
loadMsg : ' ',
sortOrder : 'desc',
remoteSort : false,
singleSelect: false,
autoSave : true,
queryParams: '',
frozenColumns : getFrozenColumn(bean),
columns:bean.columns,
onLoadSuccess:function(){
//原邏輯
},
onBeginEdit:function(index,row){
//原邏輯
},
onEndEdit: function(index,row,changes){
//原邏輯
}
});
function getFrozenColumn(bean, add) {
if (bean.frozenColumns != undefined) {
return bean.frozenColumns;
}
bean.frozenColumns = new Array();
bean.frozenColumns[0] = new Array();
var frozen = getConfFrozenColumnNum();//接口獲取凍結(jié)列數(shù)
try {
if (add) {
frozen = frozen + add;
} else {
frozen = frozen + 1; //加一個(gè)序號(hào)列
}
} catch (e) {
}
if (frozen >= bean.columns[0].length) {
return null;
}
for (var i = 0; i <= frozen; i++) {
var col = bean.columns[0].shift();
bean.frozenColumns[0].push(col);
}
return bean.frozenColumns;
}
4、編寫提交驗(yàn)證
$(“#tableId”).edatagrid('validateRow',editRowIndex);二、表單頁
1、獲取模版,生成新的dom
let modelItems = await getEditPageItemListByIdN(resId,"1");
if(modelItems!=null && modelItems.length>0){
//設(shè)置輸入控件的easyui樣式
await setInputBoxStyle(modelItems);
//設(shè)置只讀屬性
await setReadOnly(modelItems);
}
function getEditPageItemListByIdN(resId, flag) {
var f = '';
try {
if (flag) {
f = '1';
}
} catch (e) {
}
var resultsTemp = null;
$.ajax({
url: 'temp_url',
type: 'POST',
async: false,
success: function (retData) {
var html = "";
var itemList = retData.data;
resultsTemp = retData.data;
if (itemList && itemList.length > 0) {
for (var i = 0; i < itemList.length; i++) {
var obj = itemList[i];
var code = obj.ITEM_CODE;
var id = obj.PAGE_PROPERTY_ID;
var visitable = obj.VISITABLE;
var sort = obj.P_SORT;
var isTowColumn = obj.IS_TWOCOLMN;
var state = obj.STATE;
var name = obj.PAGE_ITEM_NAME;
var mode = obj.APPLICATION_METHOD;
var itemType = obj.PAGE_ITEM_TYPE;
var MUTI_TEXT = obj.MUTI_TEXT;
var ROW_NUM = obj.ROW_NUM;
var INFO = obj.INFO;
try {
var cla = "rowItem" + f;
if (isTowColumn == '1') {//占兩列
cla = "rowItemTowColumn" + f;
}
var sta = false;
if (state == '1') {//必填，可編輯(只讀 另做處理)
sta = true;
}
if (visitable == '1') {
html += "<div class=\"" + cla + "\" style=\"display:none\">";
} else {
html += "<div class=\"" + cla + "\" >";
}
if (INFO && INFO != '') {
var helpIcon = "<span class='toolBox-Diy' style='left:-3px; top:3px'>" +
"<img class='icon-help-htable ' src='../../base/css/img3/help.png'/>" +
'<div class="tooltip tooltip-bottom" style="display: none; margin-top: 3px;"><div class="tooltip-content">' + INFO + '</div><div class="tooltip-arrow-outer" style="border-bottom-color: rgb(221, 221, 221);"></div><div class="tooltip-arrow" style="border-bottom-color: rgb(255, 255, 255);"></div></div>'
"</span>";
html += " <div class=\"content\">" + name + "：" + helpIcon + " </div>";
} else {
html += " <div class=\"content\">" + name + "：</div>";
}
if ('1' == MUTI_TEXT) {
var hh = 24 * ROW_NUM;
html += " <div class=\"element" + f + "\">";
html += " <input id=\"" + id + "\" style=\"height: 23px;\" name=\"" + id
+ "\" data-mode=\"" + mode + "\" data-options=\"multiline:true, required:" + sta + "\" style=\"height:" + hh + "px\"/>";
html += " </div>";
html += "</div>";
} else {
html += " <div class=\"element" + f + "\">";
html += " <input id=\"" + id + "\" style=\"height: 23px;\" name=\"" + id
+ "\" data-mode=\"" + mode + "\" data-options=\"required:" + sta + "\" />";
html += " </div>";
html += "</div>";
}
//碼表類型，默認(rèn)值
} catch (e) {
}
}
$("#globalColumnDiv").html(html);
}
setTimeout(function () {
try {
$('.toolBox-Diy').hover(function () {
$(this).find('.tooltip-bottom').show();
var left = $(this).offset().left - 5;
$(this).find('.tooltip-arrow-outer').css('left', '10px')
$(this).find('.tooltip-arrow').css('left', '10px')
$(this).find('.tooltip-bottom').css('left', left)
setTimeout(function () {
$('.tooltip-bottom').hide();
}, 10000);
})
$('.toolBox-Diy').mouseleave(function () {
$(this).find('.tooltip-bottom').hide();
})
} catch (e) {
}
}, 100);
}
});
return resultsTemp;
}2、處理生成新的domtree初始化form
function setInputBoxStyle(itemList, resId, isEditCombobox) {
if (itemList == null || itemList.length <= 0) {
return;
}
for (var i = 0; i < itemList.length; i++) {
var obj = itemList[i];
var mode = obj.APPLICATION_METHOD;
var id = obj.PAGE_PROPERTY_ID;
var type = obj.PAGE_ITEM_TYPE;
var codeRes = obj.CODE_RES;//碼表源
var MUTI_TEXT = obj.MUTI_TEXT;
var ROW_NUM = obj.ROW_NUM;
if (mode == '2') {
$('#' + id).textbox();
//$('#' + id).parent().replaceWith();
} else if (mode == '3') {
$('#' + id).textbox();
//$('#' + id).parent().replaceWith();
} else if (mode == '4') {
$('#' + id).textbox();
//$('#' + id).parent().replaceWith();
} else if (mode == '5') {
$('#' + id).textbox();
//$('#' + id).parent().replaceWith();
$('#' + id).textbox();
if (obj.DEFAULT_VAL) $('#' + id).textbox('setValue', obj.DEFAULT_VAL);
} else {
if (type == '1') {//文本型
$('#' + id).textbox();
if ("1" == MUTI_TEXT) {
var hh = 23 * ROW_NUM;
$('#' + id).textbox({height: hh});
if (obj.DEFAULT_VAL) $('#' + id).textbox('setValue', obj.DEFAULT_VAL);
}
} else if (type == '2') {//日期型
//$('#'+id).datebox() ;
$('#' + id).datebox({
editable: false, buttons: buttons
});
} else if (type == '3') {//日期時(shí)間型
//$('#'+id).datetimebox() ;
$('#' + id).datetimebox({
editable: false
});
} else if (type == '5') {//數(shù)值型
$('#' + id).numberbox();
if (obj.DEFAULT_VAL) $('#' + id).numberbox('setValue', Number(obj.DEFAULT_VAL));
} else if (type == '4') {//下拉列表
if (codeRes != null && codeRes !== '') {
loadCodeDataToCombobox(id, codeRes, obj.DEFAULT_VAL);
}
} else if (type == '6') {//下拉樹
$('#' + id).combotree();
if (codeRes != null && codeRes != '') {
loadCodeDataToCombotree(id, codeRes, obj.DEFAULT_VAL)
}
} else if (type == '7') {
$('#' + id).numberbox({
precision: 1,
formatter: function (value) {
// 將數(shù)字轉(zhuǎn)換為字符串
let strValue = value;
// 檢查是否包含小數(shù)點(diǎn)
if (strValue.includes('.')) {
// 去掉尾部的 0
strValue = strValue.replace(/0+$/, '');
// 如果去掉尾部 0 后小數(shù)點(diǎn)后面沒有數(shù)字了，去掉小數(shù)點(diǎn)
strValue = strValue.replace(/\.$/, '');
}
return strValue;
}
});
} else if (type == '8') {
$('#' + id).numberbox({
precision: 2,
formatter: function (value) {
// 將數(shù)字轉(zhuǎn)換為字符串
let strValue = value;
// 檢查是否包含小數(shù)點(diǎn)
if (strValue.includes('.')) {
// 去掉尾部的 0
strValue = strValue.replace(/0+$/, '');
// 如果去掉尾部 0 后小數(shù)點(diǎn)后面沒有數(shù)字了，去掉小數(shù)點(diǎn)
strValue = strValue.replace(/\.$/, '');
}
return strValue;
}
});
}
}
}
}3、 靜態(tài)化元素單獨(dú)處理（使用靜態(tài)模版邏輯重新初始化元素）
（1）排查靜態(tài)模版中的用于存儲(chǔ)值的隱藏元素，添加到新的模版
（2）排查新模版中的靜態(tài)元素，重新按靜態(tài)模版的方式初始化
if(modelItems.find(item=>item.PAGE_PROPERTY_ID==='SCHEME_TYPE' && (item.APPLICATION_METHOD && item.APPLICATION_METHOD !== '1'))){
loadCodeDataToComboboxForIntel('SCHEME_TYPE','ZNTJFA');
}4、 讀取數(shù)據(jù)賦值
setInputBoxValue(modelItems, formDetail);
function setInputBoxValue(itemList, resultObj) {
if (itemList == null || itemList.length <= 0 || resultObj == null) {
return;
}
for (var i = 0; i < itemList.length; i++) {
var obj = itemList[i];
var id = obj.PAGE_PROPERTY_ID;
var type = obj.PAGE_ITEM_TYPE;//信息項(xiàng)類型(1.文本型，2.日期型，3.日期時(shí)間型，4.碼表型)
var codeRes = obj.CODE_RES;//碼表源
var columnName = obj.ITEM_CODE;
if (type == '1') {//文本型
try {
$('#' + id).textbox('setValue', resultObj[columnName]);
} catch (e) {
}
;
} else if (type == '2') {//日期型
try {
$('#' + id).datebox('setValue', resultObj[columnName]);
} catch (e) {
}
;
} else if (type == '3') {//日期時(shí)間型
try {
$('#' + id).datetimebox('setValue', dateStrFormat(resultObj[columnName]));
} catch (e) {
}
;
} else if (type == '5') {//數(shù)值型
try {
$('#' + id).numberbox('setValue', resultObj[columnName]);
} catch (e) {
}
;
} else if (type == '4') {//碼表型
try {
$('#' + id).combobox('setValue', resultObj[columnName]);
} catch (e) {
try {
$('#' + id).combotree('setValue', resultObj[columnName]);
} catch (e) {
}
;
}
;
} else if (type == '6') {//碼表--下拉樹型
try {
$('#' + id).combotree('setValue', resultObj[columnName]);
} catch (e) {
try {
$('#' + id).combobox('setValue', resultObj[columnName]);
} catch (e) {
}
;
}
;
} else if (type == '7') {
try {
$('#' + id).numberbox('setValue', resultObj[columnName]);
} catch (e) {
try {
$('#' + id).textbox('setValue', resultObj[columnName]);
} catch (e) {
}
}
} else if (type == '8') {
try {
$('#' + id).numberbox('setValue', resultObj[columnName]);
} catch (e) {
try {
$('#' + id).textbox('setValue', resultObj[columnName]);
} catch (e) {
}
}
} else {
try {
$('#' + id).textbox('setValue', resultObj[columnName]);
} catch (e) {
}
}
}
}5、編寫提交驗(yàn)證
$(“formID”).form('validate')并對有特殊邏輯驗(yàn)證的元素進(jìn)行單獨(dú)驗(yàn)證
總結(jié)
這樣就可以實(shí)現(xiàn)大部分頁面的動(dòng)態(tài)配置，而不需要設(shè)置大量靜態(tài)模版了~
注意：
1、已有靜態(tài)頁改造時(shí)，需要核對已有的元素id和動(dòng)態(tài)模版id，確保一致性
2、特殊處理的元素保持靜態(tài)，匹配“靜態(tài)元素”，表單頁注意需要重新初始化元素
3、驗(yàn)證時(shí)注意動(dòng)態(tài)模版可能增減元素的特點(diǎn)，靈活處理驗(yàn)證，比較簡單的方式是用trycatch，或使用表單自帶form('validate')；但對特殊邏輯還是要感覺模版是否存在元素判斷是否驗(yàn)證
到此這篇關(guān)于JavaScript頁面模版化配置的文章就介紹到這了,更多相關(guān)js頁面模版化配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
寫了10年的Javascript也未必全了解的連續(xù)賦值運(yùn)算
很喜歡 蔡蔡 的這個(gè)標(biāo)題，實(shí)際蔡蔡已經(jīng)分析過了，這里借用了。或許有點(diǎn)標(biāo)題黨的意思。看完就知了。2011-03-03
事件委托是指將一個(gè)事件處理程序綁定到父元素上,而不是直接綁定到每個(gè)子元素上,下面就跟隨小編一起來了解一下JavaScript是如何處理事件委托的吧2024-12-12
在很多網(wǎng)頁上可以看到，點(diǎn)擊網(wǎng)頁的某個(gè)地方能夠彈出一個(gè)新窗口，并且可以在屏幕中隨意拖動(dòng)，通過此篇文章給大家介紹javascript彈出拖動(dòng)窗口，有需要的朋友可以參考下2015-08-08
js實(shí)現(xiàn)九宮格圖片半透明漸顯特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)九宮格圖片半透明漸顯特效的方法,涉及js操作css特效的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
一文掌握J(rèn)avaScript數(shù)組常用工具函數(shù)總結(jié)
這篇文章主要介紹了一文掌握J(rèn)avaScript數(shù)組常用工具函數(shù)總結(jié)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值2022-06-06
零基礎(chǔ)油猴腳本安裝、配置、開發(fā)入門教程(圖文)
本文詳細(xì)介紹了如何進(jìn)行油猴腳本的開發(fā),包括安裝插件、配置本地開發(fā)環(huán)境、創(chuàng)建HTML結(jié)構(gòu)、設(shè)置CSS樣式、發(fā)布與更新腳本,以及解析常用標(biāo)簽和API,通過實(shí)例展示了如何使用@match、@require、GM_xmlhttpRequest和GM_addStyle等功能,幫助開發(fā)者快速上手2025-12-12
學(xué)習(xí)Javascript閉包（Closure）知識(shí)
這篇文章主要介紹了學(xué)習(xí)Javascript閉包（Closure）知識(shí)的相關(guān)資料,需要的朋友可以參考下2016-08-08
javaScript合并對象的多種方式及知識(shí)擴(kuò)展
眾所周知JavaScript中有多種方法可以合并對象,下面這篇文章主要給大家介紹了關(guān)于javaScript合并對象的多種方式及知識(shí)擴(kuò)展,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
JS獲取URL網(wǎng)址中參數(shù)的幾種方法小結(jié)
本文主要介紹了JS獲取URL網(wǎng)址中參數(shù)的幾種方法小結(jié),包括獲取整個(gè)URL字符串和獲取URL中的參數(shù)值,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-05-05
Bootstrap實(shí)現(xiàn)模態(tài)框效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)模態(tài)框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09