ext服务器端分页

最新推荐文章于 2019-06-05 14:42:28 发布
最新推荐文章于 2019-06-05 14:42:28 发布
阅读量788 收藏
点赞数
分类专栏： 前台js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ryan1214/article/details/37695819
版权

还是先上效果图,简单描述下吧，点击查询，把结果展示在左边的grid的，点击左边的行，在右边出现同一批次数据，实现客户端分页

代码

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ page import="java.util.*" %>

<%

    response.setHeader("Cache-Control", "no-cache");

    response.setHeader("Pragma", "no-cache");

    response.setDateHeader("Expires", 0);

    String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

    String now = new java.text.SimpleDateFormat("yyyy年MM月dd日").format(new Date());

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>检查日志查看</title>

      <style type="text/css">

    .icon-search {

  background-image: url(<%=basePath%>/ext/button/style/icons/search.gif) !important;

 

}

  </style>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">  

    <script type="text/javascript">

    var CUR_DATE = "<%=now%>";//当前日期

    </script>

    <%@include file="/ext/inc/ext-js3.jsp"%>

    <script type="text/javascript" src="../common/common.js"></script>

    <script type="text/javascript">

    Ext.onReady(function() {

   

    var pnNorth=new Ext.Panel({

    id:'pnNorth',

    autoWidth:true,

    layout:'fit', //然子元素充满容器

    frame:true,

    title:"查询条件",

    autoHeight:true,

    region:'north',

    tbar : new Ext.Toolbar([{

            xtype : "buttongroup",

           columns:5,  //一行表示5列，超过的会到下一行

           padding : "0 0 0 0",

           frame : false,

           items:[

           {

              xtype:"label",

              colspan:1,

              html:"统计时间段："

           },

           {

              xtype : "datefield",

              id : "qsrqXg",

              name : "qsrqXg",

              format : "Y年m月d日",

              allowBlank : false,

              editable : false,

              width:110

           },

           {

              xtype:"label",

              colspan:1,

              html:"至"

           },

           {

              xtype : "datefield",

              id : "jsrqXg",

              name : "jsrqXg",

              format : "Y年m月d日",

              allowBlank : false,

              editable : false,

              value:CUR_DATE,

              width:110

           },{

              xtype : "button",

              iconCls:'icon-search',

              text:"查询",

              handler:function(){

               if(Ext.getCmp("qsrqXg").getValue()==null||Ext.getCmp("qsrqXg").getValue()==""||Ext.getCmp("jsrqXg").getValue()==null||Ext.getCmp("jsrqXg").getValue()==""){

              Ext.Msg.alert('提示框', '统计时间起始都不可为空');

              }else{

              //执行查询

              //先清空两个列表的stroe

              var starttime=new Date(Ext.getCmp("qsrqXg").getValue()).format("Ymd");

              var endtime=new Date(Ext.getCmp("jsrqXg").getValue()).format("Ymd");

              rzstore.removeAll();

              jgstore.removeAll();

              rzstore.load({

              params : {

                     starttime:starttime,

              endtime:endtime

                  }

             

              });

             

             

              }

              }

              }

          

          

           ]

           }])

   

   });

  

   var rzcm = new Ext.grid.ColumnModel( [//左边grid的cm

    new Ext.grid.RowNumberer(),  {

        header : "检查时间",

        dataIndex : 'JCSJ',

        sortable : true

    }, {

        header : "检查人",

        dataIndex : 'JCZXR',

        sortable : true

    }, {

        header : "异常案件数",

        dataIndex : 'YCAJS',

        sortable : true

    }, {

        header : "批次号",

        dataIndex : 'PC',

        hidden:true

    }]);

   

     var rzstore = new Ext.data.JsonStore( {// 左边grid的store，因为需需要分页，所以不需要totalproperty和root属性，只需要定义URL和fileds

     url : CONTEXT_PATH+"/sjzlAction!getRzResult.sa",

          autoDestroy: true,

        fields : [ 'JCSJ','JCZXR','YCAJS','PC']

        

    });

   

   

     var rzrid = new Ext.grid.GridPanel( {// 将先前的cm和store加入

          title:"日志汇总数据",

        frame : true,// 渲染表格面板

        stripeRows : true,// 显示斑马线

        loadMask:{msg:"数据加载中，请稍等..."}, 

        store : rzstore,// 设置表格对应的数据集

        cm : rzcm,

        listeners : {

        'rowclick':function(grid, rowIndex){//监听行点击事件

         var record=grid.getStore().getAt(rowIndex);//获得点击的行数据

         jgstore.removeAll();

         jgstore.baseParams.pc =record.data.PC;  必须要设置，不能再下面的load设置，因为每一次分页都要有这个参数来过滤数据

         jgstore.load({   //加载右边的列表数据并分页

              params : {

                     start : 0,

                     limit : 50

                  }

             

              });

        }

        }

    });

   

var pnWest=new Ext.Panel({

    id:'pnWest',

    width:450,

    height:'auto',

    region:'west',

    layout:'fit', //然子元素充满容器

 

    items:rzrid

   

});

 

   var jgcm = new Ext.grid.ColumnModel( [// 创建日志

    new Ext.grid.RowNumberer(),  {

        header : "案号",

        dataIndex : 'AH',

        sortable : true

    }, {

        header : "承办部门",

        dataIndex : 'CBBM',

        sortable : true

    }, {

        header : "承办人",

        dataIndex : 'CBR',

        sortable : true

    },{

        header : "规则号",

        dataIndex : 'GZID',

        sortable : true

    } , {

        header : "规则名称",

        dataIndex : 'BH',

        sortable : true

    }, {

        header : "规则说明",

        dataIndex : 'MC',

        sortable : true

    }]);

   

    var jgstore = new Ext.data.JsonStore( {//定义数据集对象

    url : CONTEXT_PATH+"/sjzlAction!getRz.sa",

          autoDestroy: true,

        fields : [ 'AH','CBBM','CBR','GZID','BH','MC'],

        root:'root',  //?

         totalProperty : "totalCount",

         baseParams:{

            pc:""          因为分页要使用到此参数，开始为“”

         }

        

    });

后来拼接的数据时：

{"totalCount":170,"root":[{"GZID":"1","CBBM":"","AHDM":"115100000000009","FYDM":null,"BH":"规则1","AH":" ","JCZXR":"3200000001","CBR":"","XTAJLX":"51",

   

     var jggrid = new Ext.grid.GridPanel( {// 创建Grid表格组件

          title:"结果列表",

        frame : true,// 渲染表格面板

        stripeRows : true,// 显示斑马线

        loadMask:{msg:"数据加载中，请稍等..."}, 

        store : jgstore,// 设置表格对应的数据集

        cm : jgcm,

         bbar : new Ext.PagingToolbar( {          

         pageSize : 50,           

         displayInfo : true,

          store : jgstore,           

          displayMsg : '显示第{0}条到{1}条记录,一共{2}条记录',           

          emptyMsg : '没有记录' 

                 })

    });

 

var pnCenter=new Ext.Panel({

    region:'center',

    layout:'fit',//然子元素充满容器

    items:jggrid

});

var vp=new Ext.Viewport({

    layout:"border",

    items:[

       pnNorth,

       pnWest,

       pnCenter            //布局上，左，中

    ]

});

   

    })

   

   

   

   

   

   

   

   

    </script>

   

</head>

<body><br><br></body>

</html>

服务器端java代码，先写左边不需要分页的

public String queryRzmain(String starttime, String endtime) {

       JSONArray ja = new JSONArray();

       List list = jdbc.queryForList("select CASE  WHEN JCSJ IS NOT NULL THEN CONVERT(VARCHAR,DATEPART(yy,JCSJ))+'年'+CONVERT(VARCHAR,DATEPART(mm,JCSJ))+'月'+CONVERT(VARCHAR,DATEPART(dd,JCSJ))+'日' END AS JCSJ, JCZXR,YCAJS,PC from JC_RZ_MAIN WHERE JCSJ>=convert(datetime,'"

                     + starttime

                     + "',108) AND JCSJ<=convert(datetime,'"

                     + endtime + "',108)");

       Iterator iter = list.iterator();

       while (iter.hasNext()) {

           Map map = (Map) iter.next();

           JSONObject json = new JSONObject();

           json.put("JCSJ", map.get("JCSJ"));

           String jczxr = StringUtils.trim(map.get("JCZXR"));

           String jczxrmc = "";

           if (jczxr.equals(Constants.JCZXR_AUTO)) {// 自动检查

              jczxrmc = Constants.JCZXR_AUTO;

           } else {

              jczxrmc = CourtUtils.getYhmc(jczxr);

           }

           if ("".equals(jczxrmc)) {

              jczxrmc = jczxr;

           }

           json.put("JCZXR", jczxrmc);

           json.put("YCAJS", map.get("YCAJS"));

           json.put("PC", map.get("PC"));

           ja.add(json);

       }

       return ja.toString();

    }

 右边分页的

public String queryRz(String pc, int start, int limit) {

 

       JSONObject json = new JSONObject();

       // 先分别查询jc_jg分页和jc_gzdy全部

       List gzList = hibernateDao.queryForList(" FROM JcGzdy");

       Map gzMzp = new HashMap();

       Iterator iter = gzList.iterator();

       while (iter.hasNext()) {

           JcGzdy jcgzdy = (JcGzdy) iter.next();

           gzMzp.put(jcgzdy.getId(), jcgzdy);

       }

       Map<String,String> cbbmMap = this.getCbbmMap();

       Map<String,String> cbrMap = this.getCbrMap();

       // 拼接where条件

       StringBuffer sb = new StringBuffer();

       sb.append(" WHERE PC=" + pc + "");

       // 按分页查询jc_jg

       PaginateJdbc paginateJdbc = (PaginateJdbc) WebAppContext

              .getBeanEx("SjzlPaginateJdbc");

       PageBean pb = new PageBean();

       pb.setCounthql("select count(1)  as cnt from JC_RZ " + sb.toString());//获取总记录数的sql

       pb.setHql("select * from JC_RZ " + sb.toString());获取listde sql

       pb.setLen(limit);// 每页记录数

       pb.setStartRow(start);// 开始行

       pb = paginateJdbc.getList(pb);

       List<Map<String, Object>> list = pb.getResult();

       if (list != null && list.size() > 0) {

           for (Map<String, Object> tmap : list) {

              JcGzdy gzdy = (JcGzdy) gzMzp.get(tmap.get("GZID"));

              tmap.put("MC", gzdy.getMc());

              tmap.put("CBBM", StringUtils.trim(cbbmMap.get(tmap.get("CBBM"))));

              tmap.put("CBR", StringUtils.trim(cbrMap.get(tmap.get("CBR"))));

              tmap.put("BH", gzdy.getBh());

           }

       }//查询这是分页

       json.put("root", JSONArray.fromObject(list));// 记录数据项

       json.put("totalCount", pb.getTotalRows());// 总记录数

       return json.toString();

    }

 

 

ryan1214
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[Ext JS 4] Grid 实战之分页功能
oscar999的专栏
07-24 1万+
分页功能的实现有两种途径： 一种是服务端分页方式， 也就是web客户端传递页码参数给服务端，服务端根据页面参数返回指定条数的数据。也就是要多少取多少。这种方式比较适合Grid 的数据量很大，需分批取。 另一种是客户端分页方式， 一次性从服务端取回所有的数据在客户端这边实现分页。这种自然适合数据量较少的状况，减少和服务端的交互， 对性能有一些帮助。这种方式还有一种好处就是对于初学Ext JS Grid 或分页功能比较简单和直观了。 Ext 目前的官方文档中，对于客户端分页的方式介绍和实例不多，而服务端
[ExtNet] GridPanel怎么实现服务器端分页、排序、查询?--Oracel存储过程分页
德仔
09-13 4897
A.前端aspx文件 i.store定义 <ext:Store ID="StoreIma" runat="server" OnRefreshData="StoreIma_OnRefreshData"> <Reader> <ext:JsonReader> <Fields&g...
Ext js 4 简单实现分页查询续--客户端分页
Dice的学习笔记
01-13 1723
之前介绍了后台分页,这次因为需求,不得不改成客户端分页,也就是一次把所有数据从后台读到前台,保存到内存中,再执行分页操作.   这个方法的先决条件是需要一个ext-all.js里没有的组件: PagingMemoryProxy.js (参考位置:ext-4.2.1.883\examples\ux\data\PagingMemoryProxy.js)   把它和ext-all.js一样引
Ext.js 分页查询及展示分析
Something of an idiot
06-05 1147
最近工作上面用到的前端框架是EXT.js，最近收到一个问题，分页查询总是走不到下一页。 现将分析过程记录如下： **ext三大件：**Model、Proxy、Store。早期的版本应该有些出入 1.Ext.data.Model Model可以看做是一个数据实例 2.Ext.data.store store 用来装载 Ext.data.Model 数据，一般通过Ext.data.proxy.Prox...
Ext js jsonStore 本地简单用法 example
weixin_34341229的博客
03-03 103
1)第一种带root的写法 var dataJson = { 　　'root':[{'ID':1,'Level':1,'MaxLevel':3,'Name':'marker1','ParentId':0}, 　　　　　　　　{'ID':1,'Level':1,'MaxLevel':3,'Name':'marker1','ParentId':0}] }　　　　 　　　　　　　　var st...
EXT的jsonstore使用
iechenyb专栏
12-19 1231
1 定义静态的store  var store  = new Ext.data.JsonStore({   fields:['col1','col2','col3'] }); storedata =[{col1:xx,col2:yy;col3:zz}] 2 定义动态的store var store1 = new Ext.data.JsonStore({ url:'', ro
ext分页
伊凡个人博客
08-23 180
开始的时候只是听说过ext,也不知道他是个怎样的东东. 现在用了,发现在这玩意确实很强大.在项目中用他做了个分页,挺好用. 帖出来代码共享一下. 1.页面要用到ext框架,必须先导入两个js文件和它自带的样式文件: &lt;link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /&gt; ...
ExtJS Grid组件实现分页功能
u013905744的专栏
12-26 1460
在网上找了半天，也没有找到很好的Grid组件实现分页功能的实例。 用了半天时间搞定了，来记录下 前端使用的是ExtJS MVC模式 1. store /// Ext.define("AM.store.UserInfo", { extend: 'Ext.data.Store', model: 'AM.model.UserInfo', pageSize: 4
Extjs中store与分页传递参数问题
06-21 9356
在Extjs中，使用store从服务器断加载数据，我们一般这样定义： var store = Ext.create('Ext.data.Store',{ model:'User', proxy:{ type:'ajax', url:'findUser.action', reader:{ type:'json' } } }); 当我们需要加载数据时，使用store.load()
Ext前台分页（页面分页）
12-21 511
今天上午测试并实现了Ext的前台分页，参考了网上的资料，使用了网上的一个js文件，最后提供该js文件的下载。 实现代码： [code="java"] Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext...
在jquery ajax中，如果从后台往前台传一个List集合，前台解析
ryan1214的专栏
06-13 7146
1、 2、后台：       List test2 = new ArrayList();         User user1 = new User();         user1.setUser_age(23);         user1.setUser_email("tan@qq.com");         user1.setUser_id(1);   
在页面上修改某个字段时,如何在提交时判断该字段有没有被修改过（含jquery取紧邻当前元素的后面一个标签）
ryan1214的专栏
06-23 4373
1）在页面载入时，保存字段值。 在点击提交时对比字段的现在值和已保存的值查看是否有改变 2）在字段，一般应该是文本框吧。 在其改变事件中（onchange() ），如果此事件激活了 可以认为有改变，稳妥的方式和1）结合起来。 必须1和2集合起来，
jquery对象怎么转换为html对象（也就是js的dom对象）
ryan1214的专栏
06-17 4359
核心提示：jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，一般情况下，如S(’#id’)得到的是jquery对象，它不能使用js中的dom方法。所以，如果jquery对象要使用标准的dom方法，就需要进行对象转换。 刚开始学习jQuery，可能一时会分不清楚哪些是jQuery对象，哪
document获取页面控件的标签对象
ryan1214的专栏
06-16 2151
document.getElementsByName()与  document.getElementById()、  document.getElementsByTagName()的区别是什么？ document.getElementsByName()    是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。 document.getElementById()  
ext可编辑grid保存，删除修改
ryan1214的专栏
07-01 1803
最近才开始学ext，做了个小模块，留作以后类似的
js创建map并循环map
ryan1214的专栏
07-01 1566
var columnModel={}; for(var i=1;i columnModel[sss[i].dataIndex]=sss[i].header; }; columnModel是一个map 设置值的时候columnModel[xingming]="王蒙"; 获取值的时候用columnModel[‘xingming’]或者columnModel.xingming，最好用第一个，
ztree从后代得到某一个节点的值，返回到前台，默认选中该节点
ryan1214的专栏
06-20 1195
$(document).ready(function(){    //一进页面查询所有的本单位下的二级代码，通过ajax取数据  $.ajax({     type: "POST",      url: "czsf/xtgl/dmgl/DmglServlet",      data:  {'status':'list'}, //在后台获取本单位的代码      success: fun
ExtJs分页显示实战解析
核心在于`Store`的配置和服务器端的响应，以及如何在客户端处理分页事件。理解这些概念对于开发高效、可扩展的Web应用程序至关重要。如果你打算深入学习Ext Js，建议直接研究其源码和官方示例，这将有助于你更好地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值