多条件分页 （Day_31）
接我的上篇博客 EasyUI_使用datagrid分页 （Day_28） .
按惯例，我们先看效果图
EasyUI 实现多条件分页很简单。
我们先来通过官网了解下这两个属性：
显然，有了load 方法后，什么Ajax啥的都没有它来的方便。它会将响应的数据加载到datagrid中，datagrid会自动的请求URL路径，从而实现带条件分页。
tt是我的表格，{}内是传递的参数。
$('#tt').datagrid('load',{"sName":sName,"sMaxWeight":sMaxWeight,"sMinWeight":sMinWeight,"sUid":sUid});
于是，我们实现多条件分页可大致分为这么几个步骤
1、获取文本框中输入要查询的文本值
2、使用datagrid的load方法，发送参数
3、数据自动重新加载
接下来上代码
先上jsp:
1 //表格 2 <table id="tt" 3 class="easyui-datagrid" 4 striped="true" 5 url="/jsp/Standard/StandardAll" 6 toolbar="#tb" 7 pagination="true" 8 pageList="[1,2,3]" 9 fit="true"> 10 <thead> 11 <tr> 12 <th field="id" width="120" align="center" checkbox="true">编号</th> 13 <th field="name" width="120" align="center">收派名称</th> 14 <th field="minweight" width="120" align="center">最小重量</th> 15 <th field="maxweight" width="120" align="center">最大重量</th> 16 <th field="user_id" width="120" align="center">操作人</th> 17 <th field="updatetime" width="150" align="center">操作时间</th> 18 </tr> 19 </thead> 20 </table> 21 22 <%--侧边栏查询区域--%> 23 <div data-options="region:'east',iconCls:'icon-search',title:'搜索栏',split:true" style="width:300px;"> 24 <div region="center" border="false" style="padding: 10px;"> 25 <table cellpadding=6> 26 <tr><input id="11" type="text" style="display:none;"/></tr> 27 <tr> 28 <td>收派标准名称:</td> 29 <td><input id="sName" name="sName" type="text" class="txt01"/></td> 30 </tr> 31 <tr> 32 <td>最大重量:</td> 33 <td><input id="sMaxWeight" name="sMaxWeight" type="text" class="txt01"/></td> 34 </tr> 35 <tr> 36 <td>最小重量:</td> 37 <td><input id="sMinWeight" name="sMinWeight" type="text" class="txt01"/></td> 38 </tr> 39 <tr> 40 <td>操作人:</td> 41 <td><input id="sUid" name="sUid" type="text" class="txt01"/></td> 42 </tr> 43 <tr> 44 <td align="right"><a class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="seach()">查询</a></td> 45 <td align="right"><a class="easyui-linkbutton" iconCls="icon-reload" plain="true" type="reset" onclick="reset()">重置</a></td> 46 </tr> 47 </table> 48 </div> 49 </div>
查询方法： 将需要做查询的参数获取，传递。
1 /*带分页查询*/ 2 function seach() { 3 var sName=$('#sName').val(); 4 var sMaxWeight=$('#sMaxWeight').val(); 5 var sMinWeight=$('#sMinWeight').val(); 6 var sUid=$('#sUid').val(); 7 $('#tt').datagrid('load',{"sName":sName,"sMaxWeight":sMaxWeight,"sMinWeight":sMinWeight,"sUid":sUid}); 8 }
Controller层：
1 @RequestMapping("StandardAll") 2 @ResponseBody 3 public Object StandardAll(Integer page,Integer rows,String sName,String sMaxWeight,String sMinWeight,String sUid) 4 { 5 6 7 Page<Standard> pageInfo = PageHelper.startPage(page, rows); 8 /*获得所有取派信息*/ 9 List<Standard> list = standardService.SelAll(sName,sMaxWeight,sMinWeight,sUid); 10 /*获取总记录条数，将结果响应给浏览器 json格式*/ 11 long total = pageInfo.getTotal(); 12 /*封装在map中*/ 13 Map<String,Object> map=new HashMap<String,Object>(); 14 /*前面我们知道，pagination 分页是根据rows,pages,所以只需根据map 键值对的特点来找到rows*/ 15 map.put("rows",list); 16 map.put("total",total); 17 return JSON.toJSON(map); 18 }
Service层：
1 public List<Standard> SelAll(String sName,String sMaxWeight,String sMinWeight,String sUid);
Service 实现类： 名称做模糊查询，具体的数值做精确查询
1 public List<Standard> SelAll(String sName,String sMaxWeight,String sMinWeight,String sUid) { 2 StandardExample standardExample=new StandardExample(); 3 StandardExample.Criteria criteria = standardExample.createCriteria(); 4 //默认筛选状态为0，也就是可用的取派标准信息 5 criteria.andDeltagEqualTo("0"); 6 //判断，当它们非空时，添加条件筛选 7 if (sName!=null&&!(sName.equals(""))) 8 { 9 10 criteria.andNameLike("%"+sName+"%"); 11 } 12 if (sMaxWeight!=null&&!(sMaxWeight.equals(""))) 13 { 14 criteria.andMaxweightEqualTo(Double.parseDouble(sMaxWeight)); 15 } 16 if (sMinWeight!=null&&!(sMinWeight.equals(""))) 17 { 18 criteria.andMinweightEqualTo(Double.parseDouble(sMinWeight)); 19 } 20 if (sUid!=null&&!(sUid.equals(""))) 21 { 22 criteria.andUser_idLike(sUid); 23 } 24 List<Standard> ListStandardList = standardMapper.selectByExample(standardExample); 25 return ListStandardList; 26 }
好，使用easyui datagrid 分页就告一段落了。
有什么不懂可以私信博主。
