我们以往做修改的时候,把后台传过来的代码赋值到指定的文本框需要很繁琐的一个一个赋值
比如:$("").val();.........
加入表单有很多个文本框,就需要写很多个这样的代码,现在只需要一个公共方法去封装一下
前端代码:`
<form id="editForm" method="post">
<input type="hidden" name="id" id="edit_id"/>
<tr>
<td>结算周期:</td>
<td>
<input class="easyui-textbox" name="billingCycle" style="width:180px"/>
</td>
<td>机构名称:</td>
<td>
<input class="easyui-textbox" name="institutionName" style="width:180px"/>
</td>
</tr>
<tr>
<td>应收本金:</td>
<td>
<input class="easyui-textbox" name="receivablePrincipal" id="edit_receivablePrincipal"
style="width:180px" data-options="required:true,validType:'CurrencyFloat'"/>
</td>
<td>应付本金:</td>
<td>
<input class="easyui-textbox" name="payablePrincipal" id="edit_payablePrincipal"
style="width:180px" data-options="required:true,validType:'CurrencyFloat'"/>
</td>
</tr>
<tr>
<td>结算成本净额:</td>
<td>
<input class="easyui-textbox" name="netSettlementCost" id="edit_netSettlementCost"
style="width:180px" data-options="required:true,validType:'CurrencyFloat'"/>
</td>
<td>成本费率:</td>
<td>
<input class="easyui-textbox" name="costRate" id="edit_costRate"
style="width:180px" data-options="required:true,validType:'sumRate'"/>
</td>
</tr>
<tr>
<td>期数:</td>
<td>
<input class="easyui-combobox" style="width:180px" name="term" id="edit_name"/>
</td>
</tr>
</form>`
这里暂时用的easyui的样式,具体样式还是看你自己的项目
然后是封装的js代码
//这里的formId就是表单ID号,resultJson就是后台根据ID传过来的json串,类似于{id:,name:...}
function deserializerJson2EasyUiForm(formId,resultJson){
var form=$("#"+formId);
var Selector="[class*='easyui-textbox'],[class*='easyui-combobox']";
var UiElements=form.find(Selector);
//循环遍历
$.each(UiElements,function(index){
var classType=$(this).attr("class");
var id=$(this).attr("id")
var inputName="";
var inputValue="";
if(classType.indexOf("easyui-textbox")>-1){
inputName=$(this).attr("textboxname");
if(checkEffFormName(inputName,resultJson)){
inputValue=getValueByElementsName(inputName,resultJson);
$("#"+id).textbox("setValue",inputValue);
}
............
这里只是举了一个判断例子,其余的自己实现
}
})
}
/**
* 验证表单列name是否能在Json数据中查找到
* @param elementName
* @param resultJson
* @returns {boolean}
*/
function checkEffFormName(elementName,resultJson){
if(resultJson){
for(var attr in resultJson){
if(attr==elementName){
return true;
}
}
return false;
}
}
/**
* 根据表单内容name值查找json对象中的结果值
* @param elementName
* @param resultJson
* @returns {*}
*/
function getValueByElementsName(elementName,resultJson){
return resultJson[elementName]==undefined?"":resultJson[elementName];
}
以上代码就是封装json自动赋值到对应的文本框