多个jquery中select2多选框数组向后台传值问题

背景:

      前端框架为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";
	}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值