selectpicker多选功能实现

最新推荐文章于 2024-07-17 09:42:44 发布

yzhldk

最新推荐文章于 2024-07-17 09:42:44 发布

阅读量1w

点赞数

本文链接：https://blog.youkuaiyun.com/yzhldk/article/details/46980809

版权

本文介绍了如何在前台设置selectpicker以实现多选功能，包括相关代码展示，并提到在后台controller层处理该功能时的注意事项，特别是字段状态在查询后的恢复，以确保前台能够保留用户的选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前台设置

需要设置selectpicker为multiple，见代码

<td style="width: 300px;">
	<select id="vControllerType" name="vControllerType" data-size="6" class="selectpicker show-tick show-menu-arrow" multiple data-max-option="1">
		<c:forEach items="${controllerList}" var="controllerType" varStatus="status">
                       <option value='${controllerType.id}' ${params.vControllerType.contains(controllerType.id)?'selected':''}>
                             <c:out value='${controllerType.name}'/>
                        </option>
                 </c:forEach>
	</select>
			        
</td>

控件传给后台的值是诸如‘id1,id2,id3’这样的形式；

前台界面图片

2.传给后台的controller层代码如下：

@RequestMapping("queryTestSamplePage")
    public String queryTestSamplePage(@RequestParam(defaultValue = "1", required = false) int pageNo,
            @RequestParam(defaultValue = "15", required = false) int pageSize, @RequestParam(defaultValue = "0", required = false) int recordOrder,
            TestSampleSearchVO testSampleSearchVO, HttpServletRequest request, Model model) {
        PageBean<TestSampleModel> pageBean = new PageBean<TestSampleModel>();
        pageBean.setPageNo(pageNo);
        pageBean.setPageSize(pageSize);
        pageBean.setOrderBy("ts.create_time");
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("projectId", request.getSession().getAttribute("projectId"));
        
        String originalSupplierStr=testSampleSearchVO.getvSupplier();
        String originalContStr=testSampleSearchVO.getvControllerType();
        map.put("testSampleSearchVO", testSampleService.modifySuppAndCont(testSampleSearchVO));
        pageBean.setParams(map);
        pageBean.setResultList(testSampleService.findTestSamplePage(pageBean));
        
        testSampleSearchVO.setvSupplier(originalSupplierStr);
        testSampleSearchVO.setvControllerType(originalContStr);
        
        model.addAttribute("testSampleSearchVO", testSampleSearchVO);
        
        model.addAttribute("recordOrder", recordOrder);
        model.addAttribute("params", pageBean.getParams());
        model.addAttribute("pageBean", pageBean);
        model.addAttribute("controllerList", testSampleControllerService.findControllerList());
        model.addAttribute("supplierList", testSampleSupplierService.findSupplierList());
        
        request.getSession().setAttribute("selectedItem", "testSample_sample");

        return ControllerConstants.TESTSAMPLE + File.separator + "testSample.jsp";
    }

注意：

1）其中TestSampleSearchVO有对vControllerType的定义：（注意在controller层对此字段处理后，会去调用最终的mybatis处的查询，但是查完之后又恢复成原来的originalContStr,这是因为需要把此参数传给前台，以使得在前台可以保持勾选原来选择的东西）

private String vControllerType;

2）modifySuppAndCont函数是主要的处理函数，对拼成最后的字符串有决定性作用，代码如下：

public TestSampleSearchVO modifySuppAndCont(TestSampleSearchVO testSampleSearchVO) {
        List<TestSampleControllerModel> testContList=testSampleControllerDao.getAllEntity();;
        List<TestSampleSupplierModel> testSuppList=testSampleSupplierDao.getAllEntity();;
        StringBuffer strBuff=new StringBuffer();
        ......此处省略了一些代码
        testSampleSearchVO.setvSupplier(strBuff.toString());
        
        
        StringBuffer strContBuff=new StringBuffer();
        if(testSampleSearchVO.getvControllerType()!=null){
            if(!testSampleSearchVO.getvControllerType().equals("")){
                String[] contrStrList=testSampleSearchVO.getvControllerType().split(",");
                strContBuff.append("(");
                    for(String k:contrStrList){
                        strContBuff.append("\'");
                        strContBuff.append(k);
                        strContBuff.append("\'");
                        strContBuff.append(",");
                                
                    }
                    strContBuff.append("''");
                    strContBuff.append(")");
                    
            }else{
                strContBuff.append("(");
                for(TestSampleControllerModel tm:testContList){
                    strContBuff.append("\'");
                    strContBuff.append(tm.getId());
                    strContBuff.append("\'");
                    strContBuff.append(",");
                }
                strContBuff.append("''");
                strContBuff.append(")");
            }
        }else{
            strContBuff.append("(");
            for(TestSampleControllerModel tm:testContList){
                strContBuff.append("\'");
                strContBuff.append(tm.getId());
                strContBuff.append("\'");
                strContBuff.append(",");
            }
            strContBuff.append("''");
            strContBuff.append(")");
        }
        testSampleSearchVO.setvControllerType(strContBuff.toString());
        return testSampleSearchVO;
    }

3）追溯到最终的mybatis查询语句代码

<select id="getEntityBySearchVO" parameterType="pageBean" resultMap="testSampleResultMap">
	SELECT ts.id,ts.controller_type AS controllerType,ts.vehicle_type,ts.part_number,tss.name AS supplier,
	sdi.domain_value AS sampleStatus,ts.sample_stage AS sampleStage,ts.software_version,ts.hardware_version,ts.manufacturer,ts.warehousing_date,
	ts.project_id,ts.description,su.username AS creator,ts.create_time  
	FROM test_sample ts 
	LEFT JOIN test_sample_controller tsc ON ts.controller_type=tsc.id
	LEFT JOIN test_sample_supplier tss ON ts.supplier=tss.id
	LEFT JOIN system_users su ON ts.creator=su.id
	LEFT JOIN system_domain_int sdi ON ts.sample_status=sdi.domain_key AND sdi.domain_type='TEST_SAMPLE_STATUS' 
	<where>
		<if test="params.testSampleSearchVO!=null">
			<if test="params.testSampleSearchVO.vControllerType!=null and params.testSampleSearchVO.vControllerType.trim().length()>0">
				AND ts.controller_type IN 
					${params.testSampleSearchVO.vControllerType}
		</if> 
		<if test="params.testSampleSearchVO.vSupplier!=null and params.testSampleSearchVO.vSupplier.trim().length()>0">
				AND ts.supplier IN ${params.testSampleSearchVO.vSupplier}
		</if>	
			AND ts.project_id=#{params.projectId}
	</where>
		ORDER BY ts.create_time
</select>

4）可以看一下查询时后台拼成的sql（拷贝自myeclipse的console）

select count(1) FROM test_sample ts LEFT JOIN test_sample_controller tsc ON ts.controller_type=tsc.id LEFT JOIN test_sample_supplier tss ON ts.supplier=tss.id LEFT JOIN system_users su ON ts.creator=su.id LEFT JOIN system_domain_int sdi ON ts.sample_status=sdi.domain_key AND sdi.domain_type='TEST_SAMPLE_STATUS' WHERE ts.controller_type IN ('30ba86d1ca23478b8b0855fbaff53b8a','7e555d4afd1349259ccf2ac755abee6a','852df69237db401eab51c102612b4082','') AND ts.supplier IN ('b57e824f80a14eb4a85cfcbc81bfefa5','c3899b11ec39497aa41515660f0b09f7','') AND ts.project_id=?

Parameters: 4eb4503406724520a811c9d1fc8fee8c(String)