首页 > 其他分享> > 多条件分页（Day_31）

多条件分页（Day_31）

2021-01-26 20:34:55 作者：互联网

按惯例，我们先看效果图

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 分页就告一段落了。

有什么不懂可以私信博主。

标签：sMaxWeight,sName,分页,sUid,31,sMinWeight,datagrid,Day,String
来源： https://www.cnblogs.com/papercy/p/14332274.html

多条件分页 （Day_31）

多条件分页（Day_31）