背景:
前端框架为AdminLTE,后台为SSM,项目中需要实现表格添加一行的功能,并且这一行中有select2的多选数组
遇到的问题:
(1)select2多选返回的数据是数组,但添加多行,由于其name相同,springMVC中通过String[] orgNames获取的数据错误
eg:第一个select2多选获得的数组值 orgName={1,2},第二个select2多选获得的数组值 orgName={3,4}
后台获取的 orgName={1,2,3,4},无法区分各个select2获取的值
方案:通过提交时将name属性改变
(2)添加一行后需要再次渲染select2
(3)更改节点name属性后,通过document.getElementsByName("nameIdsArray")获取的数组数量减一
代码:
页面
<form class="form-horizontal" action="${ctx}/orgAction/${action}.action" οnsubmit="return check()">
<table class="table table-striped" id="workTable">
<tr>
<th style="width: 6%; text-align: center;"><a
title="点击添加一行" οnclick="addLine()"> <i
class="fa fa-fw fa-plus-circle"></i>
</a></th>
<th>职务</th>
<th>姓名</th>
<th>分工</th>
</tr>
<c:forEach items="${orgWorks}" var="orgWork" varStatus="number">
<tr>
<td align="center" οnclick="deleteTr(this)"><a
title="点击删除此行"><i class="fa fa-fw fa-minus-circle"></i> </a>
</td>
<td style="width: 30%;">
<select class="form-control select2" style="width: 100%;" name="orgDutyArray">
<c:forEach items="${dutys}" var="duty">
<option value="${duty.value}"
<c:if test="${duty.value==orgWork.orgDuty}">selected="selected"</c:if>>${duty.label}</option>
</c:forEach>
</select>
</td>
<td style="width: 20%;"><input name="userNameArray"
value="${orgWork.userName}" type="text"></td>
<td style="width: 50%;">
<div class="form-group">
<select class="form-control select2" multiple="multiple" data-placeholder="分工" style="width: 100%;" name="nameIdsArray">
<c:forEach items="${workTypes}" var="workType">
<option value="${workType.value}"
<c:forEach items="${fn:split(orgWork.nameIds,';')}" var="nameId1" begin="0" end="${fn:length(fn:split(orgWork.nameIds,';'))}" varStatus="stat">
<c:if test="${workType.value==nameId1}">
selected="selected"
</c:if>
</c:forEach> <!-- 这边写的有点复杂,完全可以用select2的接口实现,当时懒得找,不建议这样写 -->
>${workType.label}</option>
</c:forEach>
</select>
</div>
</td>
</tr>
</c:forEach>
<tr id="tb"></tr>
</table>
<button type="submit" class="btn btn-info pull-right">保存</button>
</form>
<script type="text/JavaScript">
$(document).ready(function() {
$('.select2').select2();
});//渲染select2
//添加一行
function addLine() {
var html= " <tr> "+
" <td align='center' οnclick='deleteTr(this)'><a "+
" title='点击删除此行'><i class='fa fa-fw fa-minus-circle'></i> </a></td>"+
" <td style='width: 30%;'><select "+
" class='form-control select2' style='width: 100%;' "+
" name='orgDutyArray'> "+
" <c:forEach items='${dutys}' var='duty'> "+
" <option value='${duty.value}'>${duty.label}</option> "+
" </c:forEach> "+
" </select></td> "+
" <td style='width: 20%;'><input name='userNameArray' "+
" value='' type='text'></td> "+
" <td style='width: 50%;'> "+
" <div class='form-group'> "+
" <select class='form-control select2' multiple='multiple' "+
" data-placeholder='分工' style='width: 100%;' "+
" name='nameIdsArray'> "+
" <c:forEach items='${workTypes}' var='workType'> "+
" <option value='${workType.value}'>${workType.label}</option> "+
" </c:forEach>"+
" </select>"+
" </div>"+
" </td>"+
"</tr> ";
$("#tb").before(html);
$('.select2').select2(); //将页面画上去,需要重新渲染一遍
}
//删除本行
function deleteTr(Obj) {
$(Obj).parent().remove();
}
验证表单
function check() {
var userNameNodes = document.getElementsByName("userNameArray");
var nameIdsNodes = document.getElementsByName("nameIdsArray");
if(nameIdsNodes !== null || nameIdsNodes !== undefined || nameIdsNodes !== ''){
for ( var i = 0; i < userNameNodes.length; i++) {
//改变名字是为了后台取数据
nameIdsNodes[0].name=userNameNodes[i].value; //如果将名字改变,在nameIdsNodes中出去改变名字的节点,并重排角标,这里是个大坑
}
}
return true;
}
</script>
后台
@RequestMapping(value="updateOrg")
public String updateOrg(String[] orgDutyArray,String[] userNameArray){
List<OrgWork> orgWorklist = new ArrayList<OrgWork>();
for (int i = 0; i < orgDutyArray.length; i++) {
String[] name = request.getParameterValues(userNameArray[i]);
String nameString ="";
for (int j = 0; j < name.length; j++) {
nameString=nameString+";"+name[j];
}
OrgWork orgWork= new OrgWork("",orgDutyArray[i], userNameArray[i], org.getOrgId(),nameString.substring(1),"");
orgWorklist.add(orgWork);
}
return "orgManager/orgForm";
}