zoukankan      html  css  js  c++  java
  • 多条件分页 (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="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 分页就告一段落了。

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

  • 相关阅读:
    项目中openlayer中使用,完整解决方案(数据库矢量数据,动态更新,分层,编辑)
    openlayer
    关于splitViewController自己的总结....
    GIS底层开发总结
    判断联网 phone
    nsdate 前一天 后一天
    ObjectiveC 字符处理函数 全 substring indexof
    oracle
    Windows Xp上跑IIS5.1x 用户访问过多出错
    Jquery中替换节点的方法replaceWith()和replaceAll()
  • 原文地址:https://www.cnblogs.com/papercy/p/14332274.html
Copyright © 2011-2022 走看看