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，会及时跟大家交流，一起提高。

                                                              晚安！