js 編輯彈窗顯示 文本框賦值方法封裝
-
場景
image.png
上圖所示點(diǎn)擊編輯按鈕彈出一個(gè)窗口例嘱，這時(shí)需要對彈窗內(nèi)的文本框進(jìn)行賦值顯示拼卵，傳統(tǒng)寫法是：
$('#tag_name').val('1'); $('#type').val(1) $('#sort').val(1)
如果后面字段多起來，這樣寫就太耗費(fèi)時(shí)間了腋腮，于是便封裝了以下方法（參考網(wǎng)上別人發(fā)的即寡，進(jìn)行了略微調(diào)整）
封裝方法如下（目前只支持 input select textarea 賦值）：
(function($){
$.fn.extend({
initForm:function(options){
//默認(rèn)參數(shù)
var defaults = {
jsonValue:"",
exclude:[], //不需要進(jìn)行初始化的name,將name字符串?dāng)?shù)組傳入
name_equal:{}, //name相同時(shí)，對應(yīng)下標(biāo)
isDebug:false //是否需要調(diào)試莺丑，這個(gè)用于開發(fā)階段墩蔓，發(fā)布階段請將設(shè)置為false，默認(rèn)為false,true將會(huì)把name value打印出來
}
//設(shè)置參數(shù)
var setting = $.extend({}, defaults, options);
var form = this;
jsonValue = setting.jsonValue;
name_equal = setting.name_equal;
// console.log(jsonValue);
//如果傳入的json字符串昏名，將轉(zhuǎn)為json對象
if($.type(setting.jsonValue) === "string"){
jsonValue = $.parseJSON(jsonValue);
}
if($.type(setting.name_equal) === "string"){
name_equal = $.parseJSON(name_equal);
}
//如果傳入的json對象為空葡粒，則不做任何操作
if(!$.isEmptyObject(jsonValue)){
var debugInfo = "";
$.each(jsonValue,function(key,value){
//是否開啟調(diào)試膜钓，開啟將會(huì)把name value打印出來
if(setting.isDebug){
//alert("name:"+key+"; value:"+value);
debugInfo += "name:"+key+"; value:"+value+" || ";
}
if(setting.exclude.indexOf(key) > -1){
if (name_equal[key] !== undefined){
key = name_equal[key]
}
var formField = form.find(" [name='"+key+"']");
if($.type(formField[0]) === "undefined"){
if(setting.isDebug){
alert("can not find name:["+key+"] in form!!!"); //沒找到指定name的表單
}
} else {
var fieldTagName = formField[0].tagName.toLowerCase();
// console.log(fieldTagName);
if(fieldTagName == "input"){
if(formField.attr("type") == "radio"){
$("input:radio[name='"+key+"'][value='"+value+"']").attr("checked","checked");
}else {
formField.val(value);
}
} else if(fieldTagName == "select"){
//do something special
formField.val(value);
} else if(fieldTagName == "textarea"){
//do something special
formField.val(value);
} else {
formField.val(value);
}
}
}
})
if(setting.isDebug){
alert(debugInfo);
}
}
return form; //返回對象，提供鏈?zhǔn)讲僮? }
});
})(jQuery)
調(diào)用方法如下：
let name_arr = ['id','tag_name','type','sort'];
let name_equal = {}
let options = {jsonValue:data,exclude:name_arr,name_equal:name_equal,isDebug:false};
$("#edit_form").initForm(options)
方法解釋：
name_arr： input框name屬性名沃疮，如： <input type='text' name='tag_name'>
name_equal： 當(dāng)有多個(gè)input屬性名相同，但數(shù)組下標(biāo)不同時(shí)邑茄，即可指定不同的下標(biāo)對應(yīng) 返回?cái)?shù)據(jù)的值俊啼，如：
<input type='text' name='tag_name[1]'>
<input type='text' name='tag_name[2]'>
<input type='text' name='tag_name[2]'>
這時(shí) name_equal 值應(yīng)該為：
name_equal = {
tag_name_1:'tag_name[1]',
tag_name_2:'tag_name[2]',
tag_name_3:'tag_name[3]',
}
如上代碼中，tag_name_1 為后端返回的數(shù)據(jù)結(jié)構(gòu)
options：
第一個(gè)參數(shù) jsonValue：后端返回的數(shù)據(jù)（json格式）
第二個(gè)參數(shù) exclude：需要賦值的input框數(shù)組同木，name_arr
第三個(gè)參數(shù) name_equal：有相同name跛十，下標(biāo)不同時(shí)傳入的json 數(shù)組值
第四個(gè)參數(shù) is_debug： 是否開啟調(diào)試
