接我的上篇博客 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 分页就告一段落了。
有什么不懂可以私信博主。