SpringMVC批量插入，js點擊按鈕自動增加一行

前言：項目中需要做一個批量插入的功能，需求是這樣的，添加應急隊的同時爲應急隊添加隊員，因爲不知道每個隊有多少個隊員，所以需要用JS做一個自動添加行，自動減少行的功能。

關鍵字：springMVC批量插入，JS自動添加行，MyBatis批量插入。

內容：

 一，jsp代碼：

<span style="font-size:14px;"><tr>
   <td>姓名</td>
   <td>電話</td>
   <td>單位</td>
   <td>職務</td>
   <td><img src="${pageContext.request.contextPath}/admin/theme/${themeKey}/images/+++.png"  width="22px" height="22px" 
     onclick="<span style="color:#FF0000;">addClomn()</span>;"/>
   </td>
</tr>
<tr>
  <td><input type="text" id="uname" name="uname"  style="width: 100%;border-left:0px;border-top:0px;border-right:0px;border-bottom:0px" class="validate[required]"/></td>
  <td><input type="text" id="phone" name="phone"  style="width: 100%;border-left:0px;border-top:0px;border-right:0px;border-bottom:0px"  class="validate[required]"/></td>
  <td><input type="text" id="unit" name="unit"  style="width: 100%;border-left:0px;border-top:0px;border-right:0px;border-bottom:0px"  class="validate[required]"/></td>
  <td><input type="text" id="position" name="position"  style="width: 100%;border-left:0px;border-top:0px;border-right:0px;border-bottom:0px"  class="validate[required]"/></td>
  <td></td>
</tr>
</span>

注：當點擊圖片按鈕時，觸發onclick="addClomn();"自動添加一行。

</pre><span style="font-size:18px;">對應的JS代碼如下：</span><p></p><p><span style="font-size:18px;"><span style="font-size:24px;"></span></span></p><pre name="code" class="javascript"><span style="font-size:14px;">//添加行
function addClomn() {
    var newTr = tb_teamUser.insertRow();
    
    var newTd0 = newTr.insertCell();
    var newTd1 = newTr.insertCell();
    var newTd2 = newTr.insertCell();
    var newTd3 = newTr.insertCell();
    var newTd5 = newTr.insertCell();
    
    newTd0.innerHTML = '<tr><td><input type="text" id="uname" name="uname"  style="width: 100%;border-left:0px;border-top:0px;border-right:0px;border-bottom:0px"  class="validate[required]"/></td>';
    newTd1.innerHTML= '<td><input type="text" id="phone" name="phone"  style="width: 100%;border-left:0px;border-top:0px;border-right:0px;border-bottom:0px"  class="validate[required]"/></td>';
    newTd2.innerHTML= '<td><input type="text" id="unit" name="unit"  style="width: 100%;border-left:0px;border-top:0px;border-right:0px;border-bottom:0px"  class="validate[required]"/></td>';
    newTd3.innerHTML= '<td><input type="text" id="position" name="position"  style="width: 100%;border-left:0px;border-top:0px;border-right:0px;border-bottom:0px"  class="validate[required]"/></td>';
    newTd5.innerHTML= '<td><img src="${pageContext.request.contextPath}/admin/theme/${themeKey}/images/---.png"  width="22px" height="22px"  <span style="color:#FF0000;">onclick="deleteClomn(this)</span>;"/></td></tr> ';
}
//刪除對應的行
 function deleteClomn(r){
	if(confirm("確定要刪除當前行?"))
	{
		var i=r.parentNode.parentNode.rowIndex;
        document.getElementById('tb_teamUser').deleteRow(i);
	}
}</span>

注：自動生成的行後面有一個減一行圖片按鈕，點擊時觸發：deleteClomn(r);

效果圖：

二，SpringMVC中接收多條數據，代碼如下：

<span style="font-size:14px;">/**
	 * 判斷應急隊id,如果id爲0,則執行添加操作，否則執行跟新操作
	 * @param request
	 * @param emergencyTeam 應急隊-對象
	 * @param uname 隊員姓名-數組
	 * @param position 職務-數組
	 * @param unit 單位- 數組
	 * @param phone 電話 -數組
	 * @return
	 */
	@RequestMapping("/edit")
	public ModelAndView edit(HttpServletRequest request,EmergencyTeam emergencyTeam,
			<span style="color:#FF0000;">String[] uname,String[] position,String[] unit,String[] phone</span>){
		long emergencyTeam_id ;
		//獲取操作人
		String createUser=(String)request.getSession().getAttribute(LoginAttribute.SESSION_LOGIN_NAME);
		Date createTime=new Date();
		emergencyTeam.setCreateUser(createUser);
		emergencyTeam.setCreateTime(createTime);
		emergencyTeam.setLocation("520123");//設置所屬地區，默認花溪
		
		EmergencyTeamService.updateEmergencyTeam(emergencyTeam);//跟新應急隊信息
		EmergencyTeamService.deleteTeamUserByEmergencyTeamID(emergencyTeam.getId());//更新隊員信息前刪除原來的隊員信息
		List<TeamUser> list = new ArrayList<TeamUser>();
		     <span style="color:#FF0000;">for (int i = 0; i < uname.length; i++) {
			TeamUser teamUser = new TeamUser();
			teamUser.setEmergency_team(emergencyTeam.getId());
			teamUser.setPhone(phone[i]);
			teamUser.setPosition(position[i]);
			teamUser.setUname(uname[i]);
			teamUser.setUnit(unit[i]);
			teamUser.setAttchId("aaa.png");
			list.add(teamUser);//將多個隊員信息存入集合
			}</span>
			//然後添加新的隊員信息
			EmergencyTeamService.addTeamUser(list);//添加應急隊員信息

		return new ModelAndView("/ec/emergencyTeam/list");
	}</span>

注：我用的是數組接收的方式來接收多條數據，當然還有更好的方式，感興趣的可以自己研究一下，因爲的業務數據不是很複雜，所以我就用的數組。

三，MyBatis代碼：

 <span style="font-size:14px;"><!-- 批量插入應急隊，隊員信息-->
	<insert id="addTeamUser" parameterType="java.util.List">
		insert into  isp_ec_emergencyuser(uname,phone,unit,position,emergency_team,attchId) 
		values 
		<foreach collection="list" item="item" index="index" separator=",">
			(#{item.uname},#{item.phone},#{item.unit},#{item.position},#{item.emergency_team},#{item.attchId})
		</foreach>
	</insert></span>

結語：好了到此爲止，批量插入操作，從前臺到底層的實現都已經搞定了。

如果有不明白的，和不合理的地方，希望大家多多指教，我每天都會登錄CSDN，會及時跟大家交流，一起提高。

                                                              晚安！