在项目中有这样一个需要,在配置管理页面中允许用户动态添加key-value的键值对;也就是说,用户最终提交的表单中包含多少个键值对是无法预期的;这样我们就需要一个动态的表单提交的一个list对象。
前端代码如下:
<div id="frame-main">
<div id="frame-content">
<h2>国际汇款配置新增</h2>
<div>
<form id="configAddForm" action="$remitModule.setTarget('remitConfigAdd.htm')" method="post">
#set($f = $formManager.newForm($request))
#addFormToken($f)
<div class="tb-table">
配置项:<input type="text" id="paramKey" name="paramKey" />
<table>
<thead>
<tr>
<th>KEY</th>
<th>VALUE</th>
<th>操作</th>
<tr>
</thead>
<tbody id="config_tb">
<tr>
<td>
<input class="key" name="paramValue[0].key"/>
</td>
<td>
<input class="value" name="paramValue[0].value"/>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<form>
</div>
<div class="tb-tfoot">
<span class="btn"><input type="button" value="增 加" id="btn-add"></span>
<span class="btn"><input type="button" value="提 交" id="btn-submit"></span>
</div>
#if($errorMsg)
<div class="frame-content">
<h3>错误消息</h3>
<p class="error_Msg">$!errorMsg</p>
</div>
#end
</div>
</div>
<script type="text/javascript">
seajs.use("$",function(J){
J("#btn-add").click(function(e){
var _len = J("#config_tb tr").length;
J("#config_tb").append("<tr id=\""+_len+"\"><td><input class=\"key\" name=\"paramValue["+_len+"].key\" /></td><td><input class=\"value\" name=\"paramValue["+_len+"].value\"/></td><td><input type=\"button\" οnclick=\"deltr(event)\" value=\"删除\"/></td></tr>");
});
J("#btn-submit").click(function(e){
var allowSub = true;
var _paramKey=J("#paramKey").val();
if(_paramKey==""){
alert("请正确填写配置数据");
J("#paramKey").addClass("errorText");
allowSub = false;
}
J("#configAddForm").submit();
});
window.deltr = function(event){
J(event.target).parents("tr").remove();//删除当前行
J("#config_tb tr").each(function(i){
J(this).find('input[name^=paramValue]').each(function(j){
J(this).attr('name', 'paramValue['+i+'].'+(j==0? "key":"value"));
})
})
}
})
</script>
/**
* 配置表单
* @author Zhangwei
* @version $Id: RemitConfigForm.java, v 0.1 2014年8月5日 下午6:01:36 Zhangwei Exp $
*/
public class RemitConfigForm {
private List<ParamModel> paramValue;
/**
* Getter method for property <tt>paramValue</tt>.
*
* @return property value of paramValue
*/
public List<ParamModel> getParamValue() {
return paramValue;
}
/**
* Setter method for property <tt>paramValue</tt>.
*
* @param paramValue value to be assigned to property paramValue
*/
public void setParamValue(List<ParamModel> paramValue) {
this.paramValue = paramValue;
}
}
/**
*
* @author Zhangwei
* @version $Id: ParamModel.java, v 0.1 2014年8月5日 下午6:02:30 Zhangwei Exp $
*/
public class ParamModel implements Serializable {
/** */
private static final long serialVersionUID = 1L;
private String key;
private String value;
/**
* Getter method for property <tt>key</tt>.
*
* @return property value of key
*/
public String getKey() {
return key;
}
/**
* Setter method for property <tt>key</tt>.
*
* @param key value to be assigned to property key
*/
public void setKey(String key) {
this.key = key;
}
/**
* Getter method for property <tt>value</tt>.
*
* @return property value of value
*/
public String getValue() {
return value;
}
/**
* Setter method for property <tt>value</tt>.
*
* @param value value to be assigned to property value
*/
public void setValue(String value) {
this.value = value;
}
/**
* @see java.lang.Object#toString()
*/
@Override
public String toString() {
return "ParamModel [key=" + key + ", value=" + value + "]";
}
}
@RequestMapping(value = "/remitConfigAdd.htm", method = RequestMethod.POST)
@Form
public String submitConfig(RemitConfigForm form) {
if (logger.isInfoEnabled()) {
logger.info(ToStringBuilder.reflectionToString(form));
}
return RemitBusinessConstants.REMIT_CONFIG_ADD;
}
结果是:
2014-08-05 18:13:32,368 [//10.64.77.25/ - /remit/remitConfigAdd.htm] INFO remit.RemitConfigController - com.alipay.overseamng.web.remit.form.RemitConfigForm@124f5739[paramValue=[com.alipay.overseamng.web.remit.model.ParamModel@16e76893, com.alipay.overseamng.web.remit.model.ParamModel@328296a4]]
2014-08-05 18:17:39,942 [//10.64.77.25/ - /remit/remitConfigAdd.htm] INFO remit.RemitConfigController - com.alipay.overseamng.web.remit.form.RemitConfigForm@149f7d63[paramValue=[ParamModel [key=aaa, value=aaaa], ParamModel [key=bbb, value=ccc], ParamModel [key=ddd, value=aaa,bbb,ccc,ddd]]]
2014-08-05 18:37:40,215 [//10.64.77.25/ - /remit/remitConfigAdd.htm] INFO remit.RemitConfigController - com.alipay.overseamng.web.remit.form.RemitConfigForm@36519d[paramValue=[ParamModel [key=aaa, value=aaaa], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=aa, value=bbb], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=], ParamModel [key=, value=]]]