接上一篇笔记：https://www.cnblogs.com/AzumaRinne/p/12073435.html
1.根据标签和id筛选；
（1） 动态加载查询选项中的标签和平台单选框
a.在ItemController.java中添加tagidsList
1 //获取数据词典项对应信息 2 List<SysDict> tagidsList = dictService.selectSysDictByTypeId(dict_type_tagids); 3 List<SysDict> platformList = dictService.selectSysDictByTypeId(dict_type_platform);
b.在DictService.java中添加selectSysDictByTypeId接口
1 //根据词典类型id 获取所有词典对象 2 List<SysDict> selectSysDictByTypeId(String typeId);
c.在DictServiceImpl.java中添加selectSysDictByTypeId的实现类
1 @Override 2 public List<SysDict> selectSysDictByTypeId(String typeId) { 3 return dictMapper.selectSysDictByTypeId(typeId); 4 }
d.在DictMapper.java中添加selectSysDictByTypeId接口
1 //根据词典类型id 获取词典对象列表 2 List<SysDict> selectSysDictByTypeId(String typeId);
e.在DictMapper.xml中添加selectSysDictByTypeId的SQL查询语句
<!-- //根据词典类型id 获取词典对象列表 List<SysDict> selectSysDictByTypeId(String typeId); --> <select id="selectSysDictByTypeId" parameterType="String" resultType="SysDict"> SELECT * FROM sys_dict WHERE dict_type_id = #{id} </select>
f.回到ItemController.java，将平台标签列表保存到model中
1 //将平台标签列表保存到model中 2 model.addAttribute("tagidsList", tagidsList); 3 model.addAttribute("platformList", platformList);
g.在item_list.jsp的选择标签或平台的查询条件弹出层表单中，添加一个foreach，然后进行遍历
1 <c:forEach items="${tagidsList }" var="dict_tagids"> 2 <label><input type="checkbox" name="search_tagids" value="${dict_tagids.dict_id }">${dict_tagids.dict_item_name }</label> 3 </c:forEach>
h.启动服务器进行测试，点击选中标签或平台，可以看到已经有弹窗进行显示
i.在在item_list.jsp的平台部分的弹出层表单中，同样添加一个foreach进行遍历
1 <!-- 平台 --> 2 <div class="form-group"> 3 <label for="edit_item_platform" class="col-sm-2 control-label">平台</label> 4 <div class="col-sm-10"> 5 <div class="checkbox"> 6 <input type="hidden" id="search_item_platform" value=""> 7 <c:forEach items="${platformList }" var="dict_platform"> 8 <label><input type="checkbox" name="search_platform" value="${dict_platform.dict_id }">${dict_platform.dict_item_name }</label> 9 </c:forEach> 10 </div> 11 </div> 12 </div>
j.重启启动服务器后点击即可看到选中标签或平台按钮已经可以动态显示出来了
（2）使用配置文件解决查询字典时的硬编码问题
a.config目录下，新建一个dictTypeId.properties文件
dict.tagids=01
dict.platform=02
dict.flag=03
b.在springmvc的xml配置文件下添加读取dictTypeId.properties文件
1 <!-- 读取配置文件 --> 2 <context:property-placeholder location="classpath:config/dictTypeId.properties"/>
c.在ItemController.java中，注入dictTypeId，取出在dictTypeId.properties中的值即可
1 //使用properties注入属性 2 @Value("${dict.tagids}") 3 private String dict_type_tagids; 4 @Value("${dict.platform}") 5 private String dict_type_platform;
d.替换ItemController中的01和02，这样子如果需要修改编码的话，就直接修改dictTypeId.properties中的值
1 //获取数据词典项对应信息 2 List<SysDict> tagidsList = dictService.selectSysDictByTypeId(dict_type_tagids); 3 List<SysDict> platformList = dictService.selectSysDictByTypeId(dict_type_platform);
e.启动服务器进行测试
（3）将查询标签id和平台id发送给服务器
a.在item_list.jsp中，找到弹出菜单的search_tagids标签，通过name获取所有的jar包
1 <div class="checkbox"> 2 <input type="hidden" id="search_item_tagids" value=""> 3 <c:forEach items="${tagidsList }" var="dict_tagids"> 4 <label><input type="checkbox" name="search_tagids" value="${dict_tagids.dict_id }">${dict_tagids.dict_item_name }</label> 5 </c:forEach> 6 </div>
b.在item_list.jsp中平台的div中添加隐藏域
<input type="hidden" id="search_item_platform" value="">
c.在item_list.jsp的选择标签或平台的查询条件弹出层表单中添加一个隐藏域
1 <input type="hidden" id="search_item_tagids" value=""> 2 <c:forEach items="${tagidsList }" var="dict_tagids">
d.在/ssm_steam_project/WebContent/admin/js/sikiedu_steam.js中添加joinTagidsAndPlatformId方法
1 /** 2 * 拼接checkbox 中的多选后的id，用#号分割 3 * @param name 点击的checkbox name属性 4 * @param divObj 将拼接完的值保存在该隐藏域value中 5 */ 6 function joinTagidsAndPlatformId(name, divObj){ 7 //拼接标签id 8 $("input[name=" + name + "]").click(function(){ 9 //创建一个数组 10 var arr = []; 11 $("input[name=" + name + "]").each(function(){ 12 //拼接id字符串 13 if(this.checked){ 14 arr.push(this.value); 15 }else{ 16 var index = arr.indexOf(this.value); 17 if(index != -1){ 18 arr[index] = ""; 19 } 20 } 21 }); 22 //遍历完成以#号拼接 1,2,3 1#2#3 23 $(divObj).val(arr.join("#")); 24 }); 25 }
e.在item_list.jsp的js代码区域init()中添加joinTagidsAndPlatformId方法
1 //处理查询 2 joinTagidsAndPlatformId("search_tagids", $("#search_item_tagids")); 3 joinTagidsAndPlatformId("search_platform", $("#search_item_platform"));
f.启动服务器进行测试
g.在item_list.jsp中的search_tagsAndplatfrom_layer 选择标签或平台的查询条件弹出层中添加一个onclick="setTagidsAndPlatformToForm()">进行确认选择
1 </div> 2 <div class="modal-footer"> 3 <button id="search_cancel_btn" type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button> 4 <button type="button" class="btn btn-primary btn-sm" onclick="setTagidsAndPlatformToForm()">确认选择</button> 5 </div> 6 </div> 7 </div> 8 </div><!-- search_tagsAndplatfrom_layer 选择标签或平台的查询条件弹出层 end-->
h.在item_list.jsp中的类型或者平台选择中添加标签id和平台id
1 <!--按类型或者平台选择--> 2 <div class="col-md-1"> 3 <button style="width:120px" id="search_tagsAndPlatform_btn" type="button" data-toggle="modal" data-target="#tagsAndplatfromLayer" class="btn btn-primary">选择标签或平台</button> 4 </div> 5 6 <!-- 标签id --> 7 <input type="hidden" id="search_form_item_tagids" name="item_tagids" value=""> 8 <!-- 平台id --> 9 <input type="hidden" id="search_form_item_platform" name="item_platform" value="">
i.在js代码区域添加setTagidsAndPlatformToForm方法
1 //将查询弹出层中的拼接好的id 设置到表单对应的隐藏域中 2 function setTagidsAndPlatformToForm(){ 3 //search_item_tagids是弹出层隐藏域的值 4 $("#search_form_item_tagids").val($("#search_item_tagids").val()); 5 $("#search_form_item_platform").val($("#search_item_platform").val()); 6 $("#search_cancel_btn").click(); 7 8 }
（4）在Service层的查询方法筛选列表
a.在ItemServiceImp中，修改selectItemInfoByVo方法
1 @Override 2 public List<ItemInfo> selectItemInfoByVo(ItemInfoVo vo) { 3 //直接查询后未筛选的列表 4 List<ItemInfo> queryList = itemMapper.selectItemInfoByVo(vo); 5 6 if(null == vo) 7 return queryList; 8 9 //判断标签和平台字符串是否为空 10 if(null != vo.getItem_tagids() && !vo.getItem_tagids().equals("") || 11 null != vo.getItem_platform() && !vo.getItem_platform().equals("")) { 12 13 //将满足条件的结果 放入过滤的列表中并返回 14 List<ItemInfo> filterList = new ArrayList<ItemInfo>(); 15 //获取查询条件id数组 16 String[] voTagids = vo.getItem_tagids().split("#"); 17 String[] voPlatforms = vo.getItem_platform().split("#"); 18 19 //遍历查询未筛选的列表 20 for (ItemInfo itemInfo : queryList) { 21 //如果这个标志位 走到最后还是true 证明 条件符合 添加到filterList 22 boolean isContain = true; 23 //处理标签 24 if(!vo.getItem_tagids().equals("")) { 25 String[] itemInfoTagids = itemInfo.getItem_tagids().split("#"); 26 //将数组转成List，稍后用到contains方法 27 List<String> itemInfoTagidsList = Arrays.asList(itemInfoTagids); 28 for (String voTag : voTagids) { 29 //通过Arrays中的contains方法判断该集合中是否包含此值 30 isContain = itemInfoTagidsList.contains(voTag); 31 if(!isContain)//如果有不包含的，直接返回跳出循环 32 break; 33 } 34 } 35 36 //处理平台 37 if(!vo.getItem_platform().equals("") && isContain) { 38 String[] itemInfoPlatform = itemInfo.getItem_platform().split("#"); 39 List<String> itemInfoPlatformList = Arrays.asList(itemInfoPlatform); 40 for (String voPlatform : voPlatforms) { 41 //判断是否包含 42 isContain = itemInfoPlatformList.contains(voPlatform); 43 if(!isContain) 44 break; 45 } 46 } 47 48 } 49 50 //全部执行完，返回新的集合 51 return filterList; 52 }else { 53 return queryList;//如果标签或者平台查询条件都为null 则直接返回查询结果 54 } 55 56 }
b.启动浏览器进行标签或者平台的筛选查询测试
（5）完善查询模块,添加模糊查询
a.在/ssm_steam_project/src/com/sikiedu/mapper/ItemMapper.xml中，根据vo查询 返回itemInfo列表的查询条件下的choose标签上面添加一个查询条件
1 <where> 2 <if test="item_name != null and item_name != ‘‘"> 3 and item_name LIKE "%"#{item_name}"%" 4 </if> 5 </where>
b.启动服务器进行查询，进行游戏名称的模糊查询
（6）优选查询时的重置按钮
a.在iten_list.jsp中，添加一下重置按钮的onclick
1 <!-- 重置查询条件 并提交 --> 2 <button id="reset_search_btn" type="button" onclick="resetSearch()" class="btn btn-primary">重置</button>
b.在iten_list.jsp中，添加重置查询条件的js方法
1 //重置查询条件,把查询条件清空并按照默认条件进行查询 2 function resetSearch(){ 3 $("#search_form_item_name").val(""); 4 $("#search_form_item_tagids").val(""); 5 $("#search_form_item_platform").val(""); 6 $("#search_form_sort_name").val(""); 7 $("#search_form_sort_rule").val(""); 8 9 $("#search_form").submit(); 10 }
c.启动服务器进行测试，
学习笔记5-----利用SSM制作steam首页和后台管理系统二（练习项目）
原文：https://www.cnblogs.com/AzumaRinne/p/12096466.html