关于前端多数组一对一传后台的处理

要实现效果如下:

当数据库已存在该用户信息时,对其进行修改,保存;用户点击新增时,后台对其进行添加保存到数据库。之前分别使用数组接收报错,最后使用封装方式统一接收

前台代码:JSP+LayerUI

 <!--联系方式-->
            <div class="layui-tab-item">
                <form class="layui-form form" action="" id="contactsList">
                <c:if test="${!empty contactsList }">
                    <c:forEach items="${contactsList }" var="contacts" varStatus="co">
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系人<span class="redPoint">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" value="${contacts.realName }" name="realName[${co.count-1}]"  lay-verify="required" placeholder="客户名称" autocomplete="off" class="layui-input form-input-half" >
                            <input type="hidden" value="${contacts.contactsId }" name="contactsId[${co.count-1}]">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话&nbsp;</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone[${co.count-1}]" lay-verify="tel" placeholder="电话" value="${contacts.phone }" autocomplete="off" class="layui-input form-input-half" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">微信&nbsp;</label>
                        <div class="layui-input-block">
                            <input type="text" name="wechat[${co.count-1}]" value="${contacts.wechat }" placeholder="微信" autocomplete="off" class="layui-input form-input-half" >
                        </div>
                    </div>
                    <hr>
                    </c:forEach>
                    </c:if>
                      <c:if test="${empty contactsList }">
                      <div class="layui-form-item">
                        <label class="layui-form-label">联系人<span class="redPoint"></span></label>
                        <div class="layui-input-block">
                            <input type="text" value="" name="realName[0]"  lay-verify="required" placeholder="联系人" autocomplete="off" class="layui-input form-input-half" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话&nbsp;</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone[0]" lay-verify="tel" placeholder="电话" value="" autocomplete="off" class="layui-input form-input-half" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">微信&nbsp;</label>
                        <div class="layui-input-block">
                            <input type="text" name="wechat[0]" value="" placeholder="微信"  autocomplete="off" class="layui-input form-input-half" >
                        </div>
                    </div>
                      </c:if>
                     <div class="layui-form-item" style="padding-left: 110px;" id="contactBox">
                        <a href="javascript:void(0);" class="layui-btn layui-btn-primary" id="createContacts"><i class="layui-icon layui-icon-add-circle"></i> 新建联系人</a>
                    </div>
                    <div class="layui-form-item" style="padding-left: 110px;">
                        <button class="layui-btn" lay-submit lay-filter="contactsList">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                    <input type="hidden" value="${enterprise.enterpriseId}" name="enterpriseId"/>
                </form>
            </div>

JS:关于新增联系人

 $('#createContacts').click(function(){
            var i = $("input[name^='realName']").length;
            let contactBox = '<div class="layui-form-item">'+
                '<label class="layui-form-label">联系人<span class="redPoint">*</span></label>'+
                '<div class="layui-input-block">'+
                    '<input type="text" name="realName['+i+']" value="" lay-verify="required"  placeholder="姓名"  autocomplete="off" class="layui-input form-input-half">'+
                '</div>'+
           '</div>'+
            '<div class="layui-form-item">'+
                '<label class="layui-form-label">电话&nbsp;</label>'+
               '<div class="layui-input-block">'+
                    '<input type="text" name="phone['+i+']" lay-verify="tel" value="" placeholder="电话"  autocomplete="off" class="layui-input form-input-half">'+
                '</div>'+
            '</div>'+
            '<div class="layui-form-item">'+
                '<label class="layui-form-label">微信&nbsp;</label>'+
                '<div class="layui-input-block">'+
                    '<input type="text" name="wechat['+i+']" placeholder="微信"  autocomplete="off" class="layui-input form-input-half" value="">'+
                '</div>'+
            '</div><hr/>';
            $('#contactBox').before(contactBox);
            form.render();//layerui重新渲染
        });

//后台处理

// 保存企业联系方式
    @RequestMapping("/modifyContacts")
    @OperateAnnotation(operateName = "进行了编辑企业联系方式操作,企业名称:")
    public @ResponseBody String modifyContacts(Integer enterpriseId, ContactsModel contactsModel,
            String operateObject) {
        UserOnlineBean userOnlineBean = getUserOnlineBean();
        if (null != userOnlineBean) {
            try {
                List<Contacts> list = new ArrayList<Contacts>();
                List<Integer> contactsId = contactsModel.getContactsId();
                List<String> realName = contactsModel.getRealName();
                List<String> phone = contactsModel.getPhone();
                List<String> wechat = contactsModel.getWechat();
                if (null != contactsId && contactsId.size() > 0) {
                    for (int i = 0; i < contactsId.size(); i++) {
                        Contacts contact = contactsService.getEntity(contactsId.get(i));
                        contact.setContactsId(contactsId.get(i));
                        contact.setPhone(phone.get(i));
                        contact.setRealName(realName.get(i));
                        contact.setWechat(wechat.get(i));
                        list.add(contact);
                    }

                    // 用户新增联系人信息
                    if (contactsId.size() < realName.size()) {
                        for (int i = contactsId.size(); i < realName.size(); i++) {
                            if (StringUtils.isNotBlank(realName.get(i)) || StringUtils.isNotBlank(wechat.get(i))
                                    || StringUtils.isNotBlank(phone.get(i))) {
                                Contacts contact = new Contacts();
                                contact.setCreateDate(new Date());
                                contact.setEnterpriseId(enterpriseId);
                                contact.setPhone(phone.get(i));
                                contact.setRealName(realName.get(i));
                                contact.setWechat(wechat.get(i));
                                list.add(contact);
                            }
                        }
                    }
                } else {
                    // 纯新添加
                    for (int i = 0; i < realName.size(); i++) {
                        Contacts contact = new Contacts();
                        contact.setCreateDate(new Date());
                        contact.setEnterpriseId(enterpriseId);
                        contact.setPhone(phone.get(i));
                        contact.setRealName(realName.get(i));
                        contact.setWechat(wechat.get(i));
                        list.add(contact);
                    }
                }
                contactsService.modifyContacts(list);
                Map<String, Object> map = new HashMap<String, Object>(0);
                map.put("code", "200");
                map.put("message", "修改联系人信息成功!");
                Gson gson = new Gson();
                return gson.toJson(map);
            } catch (ServiceException e) {
                // TODO Auto-generated catch block
            } catch (Exception e) {
                log.error("修改客户集发生错误!", e);
            }
        }
        return null;
    }

//ContactsModel:

public class ContactsModel {
    List<Integer> contactsId;
    List<String> realName;
    List<String> phone;
    List<String> wechat;
    public List<Integer> getContactsId() {
        return contactsId;
    }
    public void setContactsId(List<Integer> contactsId) {
        this.contactsId = contactsId;
    }
    public List<String> getRealName() {
        return realName;
    }
    public void setRealName(List<String> realName) {
        this.realName = realName;
    }
    public List<String> getPhone() {
        return phone;
    }
    public void setPhone(List<String> phone) {
        this.phone = phone;
    }
    public List<String> getWechat() {
        return wechat;
    }
    public void setWechat(List<String> wechat) {
        this.wechat = wechat;
    }
    
}
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值