关于selectpicker的多选问题
Posted ly-lyq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于selectpicker的多选问题相关的知识，希望对你有一定的参考价值。
刚开始拿到这个需要求的时候，我时很没有头绪的，再前期做的时候是将这个多选的作为一个数组，传入到后端，然后再插入数据库中，然后根据关系表查询，因为但是考虑显示的问题，不知道怎么将多选的数据显示出来，我就将每个多选的值都一条条显示出来，导致了本来就是需要一条记录的，最终显示了多条，结果嘛，当时半夜就被臭了一顿，最后还是靠别人的解释，才写了一遍，就写下这个来记录下我这多选的问题：
前端的jsp页面
<%@ taglib prefix="from" uri="http://www.springframework.org/tags/form" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="com.fasterxml.jackson.databind.ObjectMapper" %> <%@ page import="im.lsn.framework.springmvc.StringJspWriter" %> <%@ page import="im.lsn.framework.springmvc.json.JsonDialog" %> <%@ page import="im.lsn.framework.springmvc.json.JsonObject" %> <%@ include file="/WEB-INF/include/taglib.jsp" %> <% out = new StringJspWriter(); pageContext.pushBody(out); %> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">编辑</div> <div class="modal-body"> <form:form action="${ctxRoot}/admin/organizer/save_exhibitorInfo.do" class="form-horizontal es-form" commandName="editForm" method="post"> <from:hidden path="id"/> <div class="form-group"> <form:label path="name" class="control-label">展会名称：</form:label> <div class="control-input"> <form:input path="name" cssClass="form-control"/> </div> </div> <div class="form-group"> <form:label path="createTime" class="control-label">开始时间：</form:label> <div class="control-input"> <form:input class="form-control es-datepicker required startDate" data-format="yyyy-mm-dd" path="createTime"/> </div> </div> <div class="form-group"> <form:label path="endTime" class="control-label">结束时间：</form:label> <div class="control-input"> <form:input class="form-control es-datepicker required returnDate" data-format="yyyy-mm-dd" path="endTime"/> </div> </div> <div class="form-group"> <form:label path="venueId" class="control-label">场馆：</form:label> <div class="control-input"> <form:select path="venueId" cssClass="form-control required"> <form:options items="${venueDtos}" itemLabel="name" itemValue="id"/> </form:select> </div> </div> <div class="form-group"> <form:label path="venueBranchIds" class="control-label">分馆：</form:label> <div class="control-input"> <form:select path="venueBranchIds" cssClass="form-control selectpicker show-tick show-menu-arrow my-select-alert-venue-branch required" data-live-search-placeholder="搜索" data-live-search="true" data-none-Selected-Text="请选择" multiple="true"> <c:forEach items="${venueBranchDtos}" var="item"> <option value="${item.id}">${item.name}</option> </c:forEach> </form:select> </div> </div> <div class="form-group"> <form:label path="exhibitorInfoTypeIds" class="control-label">展会类型：</form:label> <div class="control-input"> <form:select path="exhibitorInfoTypeIds" cssClass="form-control selectpicker show-tick show-menu-arrow my-select-alert-type required" data-live-search-placeholder="搜索" data-live-search="true" data-none-Selected-Text="请选择" multiple="true"> <c:forEach items="${exhibitorTypeDtos}" var="item"> <option value="${item.id}">${item.type}</option> </c:forEach> </form:select> </div> </div> <div class="form-group"> <form:label path="description" class="control-label">描述：</form:label> <div class="control-input"> <from:textarea path="description" cssClass="form-control text-area"/> </div> </div> <div> <button type="submit" id="submit" class="btn btn-primary" style="margin-left: 150px;"> <i class="icon-save icon-large"></i>提交 </button> <button type="button" class="btn btn-default" data-dismiss="modal"> <i class="icon-arrow-left icon-large"></i>取消 </button> </div> </form:form> <link rel="stylesheet" href="${ctxRoot}/static/vendor/bootstrap-select/css/bootstrap-select.min.css"/> <script src="${ctxRoot}/static/vendor/bootstrap-select/js/bootstrap-select.js"></script> <script src="${ctxRoot}/static/vendor/bootstrap-select/js/i18n/defaults-zh_CN.js"></script> <script type="text/javascript"> $(‘.my-select-alert-venue-branch‘).on(‘loaded.bs.select‘, function (e) { let errorMsg = "${editForm.venueBranchIds}"; if (errorMsg != null && errorMsg != ‘‘) { var arr = errorMsg; if (arr.indexOf(",") != -1) { arr = errorMsg.split(","); } $(‘.my-select-alert-venue-branch‘).selectpicker(‘val‘, arr); } }); $(‘.my-select-alert-type‘).on(‘loaded.bs.select‘, function (e) { let errorMsg = "${editForm.exhibitorInfoTypeIds}"; if (errorMsg != null && errorMsg != ‘‘) { var arr = errorMsg; if (arr.indexOf(",") != -1) { arr = errorMsg.split(","); } $(‘.my-select-alert-type‘).selectpicker(‘val‘, arr); } }); $(‘.startDate‘).datepicker({ language: ‘zh-CN‘, format: "yyyy-mm-dd", autoclose: true, clearBtn: true, minuteStep: 10, minView: 5, startDate: new Date(), }).on(‘changeDate‘, function (ev) { var startDate = $(‘.startDate‘).val(); $(".returnDate").datepicker(‘setStartDate‘, startDate); $(".startDate").datepicker(‘hide‘); }); $(‘.returnDate‘).datepicker({ language: ‘zh-CN‘, format: "yyyy-mm-dd", autoclose: true, clearBtn: true, minuteStep: 10, minView: 5, startDate: new Date(), }).on(‘changeDate‘, function (ev) { var returnDate = $(".returnDate").val(); $(".startDate").datepicker(‘setEndDate‘, returnDate); $(".returnDate").datepicker(‘hide‘); }); </script> </div> </div> </div> </div> <% response.setHeader("Content-Type", "text/plain"); JsonDialog dialog = new JsonDialog(); dialog.setHtml(out.toString()); JsonObject json = JsonObject.dialog(dialog); ObjectMapper mapper = new ObjectMapper(); mapper.writeValue(response.getWriter(), json); %>
controller层代码：
@RequestMapping("edit_exhibitorInfo")
public void editExhibitorsInfo(Long id, ExhibitorInfoEditForm editForm, Model model) {
if (id != null) {
model.addAttribute("editForm", organizerService.queryExhibitorInfo(id));
} else {
model.addAttribute("editForm", editForm);
}
//查询场馆的信息
List<VenueDto> venueDtos = new ArrayList<VenueDto>();
venueDtos.add(new VenueDto(organizerService.getVenue()));
model.addAttribute("venueDtos", venueDtos);
//查询展会类型的信息
List<ExhibitorTypeDto> exhibitorTypeDtos = organizerService.getTbExihibitorTypes();
//查询分馆的信息
List<VenueBranchDto> venueBranchDtos = organizerService.getVenueBranch();
model.addAttribute("exhibitorTypeDtos", exhibitorTypeDtos);
model.addAttribute("venueBranchDtos", venueBranchDtos);
}
@RequestMapping("save_exhibitorInfo")
public String saveOrganizer(ExhibitorInfoEditForm editForm, HttpSession session) {
try {
organizerService.saveExhibitorInfo(editForm);
saveSuccess(session, "保存成功");
} catch (BusinessLogicException e) {
saveError(session, e.getMessage());
}
return redirect("/organizer/exhibitorInfoListing.do?type=organizer");
}
service层：
public void saveExhibitorInfo(ExhibitorInfoEditForm editForm) { TbExhibitorInfo exhibitorInfo = null; if (editForm.getId() != null) { exhibitorInfo = exhibitorInfoJpaRepository.findOne(editForm.getId()); if (!exhibitorInfo.getExhibitorInfoTypeIds().equals(editForm.getExhibitorInfoTypeIds())) { QTbExhibitorInfoExhTypeRel qTbExhibitorInfoExhTypeRel = QTbExhibitorInfoExhTypeRel.tbExhibitorInfoExhTypeRel; List<TbExhibitorInfoExhTypeRel> tbExhibitorInfoExhTypeRels = exhibitorInfoExhTypeRelLongJpaRepository.query() .from(qTbExhibitorInfoExhTypeRel) .where(qTbExhibitorInfoExhTypeRel.exhibitorInfo.id.eq(exhibitorInfo.getId())) .select(qTbExhibitorInfoExhTypeRel) .fetch(); if (tbExhibitorInfoExhTypeRels.size() != 0) { for (TbExhibitorInfoExhTypeRel exhibitorInfoExhTypeRel : tbExhibitorInfoExhTypeRels) { exhibitorInfoExhTypeRelLongJpaRepository.delete(exhibitorInfoExhTypeRel); } } List<String> typeIdList = Arrays.asList(editForm.getExhibitorInfoTypeIds().split(",")); for (String typeId : typeIdList) { TbExhibitorInfoExhTypeRel exhibitorInfoExhTypeRel = new TbExhibitorInfoExhTypeRel(); TbExhibitorType exhibitorType = exhibitorTypeLongJpaRepository.findOne(Long.parseLong(typeId)); exhibitorInfoExhTypeRel.setExhibitorInfo(exhibitorInfo); exhibitorInfoExhTypeRel.setExhibitorType(exhibitorType); exhibitorInfoExhTypeRelLongJpaRepository.save(exhibitorInfoExhTypeRel); } } if (!exhibitorInfo.getVenueBranchIds().equals(editForm.getVenueBranchIds())) { QTbExhibitorInfoVenueBranchRel qTbExhibitorInfoVenueBranchRel = QTbExhibitorInfoVenueBranchRel.tbExhibitorInfoVenueBranchRel; List<TbExhibitorInfoVenueBranchRel> tbExhibitorInfoVenueBranchRels = exhibitorInfoVenueBranchRelLongJpaRepository.query() .from(qTbExhibitorInfoVenueBranchRel) .where(qTbExhibitorInfoVenueBranchRel.exhibitorInfo.id.eq(exhibitorInfo.getId())) .select(qTbExhibitorInfoVenueBranchRel) .fetch(); if (tbExhibitorInfoVenueBranchRels.size() != 0) { for (TbExhibitorInfoVenueBranchRel exhibitorInfoVenueBranchRel : tbExhibitorInfoVenueBranchRels) { exhibitorInfoVenueBranchRelLongJpaRepository.delete(exhibitorInfoVenueBranchRel); } } List<String> branchIdList = Arrays.asList(editForm.getVenueBranchIds().split(",")); for (String branchId : branchIdList) { TbExhibitorInfoVenueBranchRel exhibitorInfoVenueBranchRel = new TbExhibitorInfoVenueBranchRel(); TbVenueBranch venueBranch = venueBranchLongJpaRepository.findOne(Long.parseLong(branchId)); exhibitorInfoVenueBranchRel.setExhibitorInfo(exhibitorInfo); exhibitorInfoVenueBranchRel.setVenueBranch(venueBranch); exhibitorInfoVenueBranchRelLongJpaRepository.save(exhibitorInfoVenueBranchRel); } } if (null != editForm.getName()) { exhibitorInfo.setName(editForm.getName()); } if (null != editForm.getCreateTime()) { exhibitorInfo.setCreateTime(editForm.getCreateTime()); } if (null != editForm.getDescription()) { exhibitorInfo.setDescription(editForm.getDescription()); } if (null != editForm.getEndTime()) { exhibitorInfo.setEndTime(editForm.getEndTime()); } if (null != editForm.getVenueId()) { TbVenue venue = venueLongJpaRepository.findOne(editForm.getVenueId()); exhibitorInfo.setVenue(venue); } if (null != editForm.getExhibitorInfoTypeIds()) { exhibitorInfo.setExhibitorInfoTypeIds(editForm.getExhibitorInfoTypeIds()); } if (null != editForm.getVenueBranchIds()) { exhibitorInfo.setVenueBranchIds(editForm.getVenueBranchIds()); } TbAuditStatus tbAuditStatus = getTbAuditStatus(1l); exhibitorInfo.setAuditState(tbAuditStatus); exhibitorInfoJpaRepository.save(exhibitorInfo); } else { exhibitorInfo = new TbExhibitorInfo(); if (null != editForm.getName()) { exhibitorInfo.setName(editForm.getName()); } if (null != editForm.getCreateTime()) { exhibitorInfo.setCreateTime(editForm.getCreateTime()); } if (null != editForm.getDescription()) { exhibitorInfo.setDescription(editForm.getDescription()); } if (null != editForm.getEndTime()) { exhibitorInfo.setEndTime(editForm.getEndTime()); } if (null != editForm.getVenueId()) { TbVenue venue = venueLongJpaRepository.findOne(editForm.getVenueId()); exhibitorInfo.setVenue(venue); } if (null != editForm.getExhibitorInfoTypeIds()) { exhibitorInfo.setExhibitorInfoTypeIds(editForm.getExhibitorInfoTypeIds()); } if (null != editForm.getVenueBranchIds()) { exhibitorInfo.setVenueBranchIds(editForm.getVenueBranchIds()); } TbAuditStatus tbAuditStatus = getTbAuditStatus(1l); TbExhibitorStatus tbExhibitorStatus = getTbExhibitorStatus(1l); exhibitorInfo.setAuditState(tbAuditStatus); exhibitorInfo.setExhibitorState(tbExhibitorStatus); exhibitorInfoJpaRepository.save(exhibitorInfo); TbOrganizer organizer = userService.findOrganizerByUserId(securityService.getLoginUser().getId()); exhibitorInfo.setOrganizer(organizer); if (null != editForm.getExhibitorInfoTypeIds()) { List<String> typeIdList = Arrays.asList(editForm.getExhibitorInfoTypeIds().split(",")); for (String typeId : typeIdList) { TbExhibitorInfoExhTypeRel exhibitorInfoExhTypeRel = new TbExhibitorInfoExhTypeRel(); TbExhibitorType exhibitorType = exhibitorTypeLongJpaRepository.findOne(Long.parseLong(typeId)); exhibitorInfoExhTypeRel.setExhibitorInfo(exhibitorInfo); exhibitorInfoExhTypeRel.setExhibitorType(exhibitorType); exhibitorInfoExhTypeRelLongJpaRepository.save(exhibitorInfoExhTypeRel); } } if (null != editForm.getVenueBranchIds()) { List<String> branchIdList = Arrays.asList(editForm.getVenueBranchIds().split(",")); for (String branchId : branchIdList) { TbExhibitorInfoVenueBranchRel exhibitorInfoVenueBranchRel = new TbExhibitorInfoVenueBranchRel(); TbVenueBranch venueBranch = venueBranchLongJpaRepository.findOne(Long.parseLong(branchId)); exhibitorInfoVenueBranchRel.setExhibitorInfo(exhibitorInfo); exhibitorInfoVenueBranchRel.setVenueBranch(venueBranch); exhibitorInfoVenueBranchRelLongJpaRepository.save(exhibitorInfoVenueBranchRel); } } } }
数据库中是添加了多选的类型的字段，作为一个string类型的存储，存进去也是字符串，每个不同的值是以逗号隔开
以上是关于关于selectpicker的多选问题的主要内容，如果未能解决你的问题，请参考以下文章