extjs 4.2 分页,根据查询条件分页
程序员文章站
2022-07-13 16:10:22
...
extjs 4.2 分页和根据查询条件分页 废话不多说直接上代码:
Ext.onReady(getPageList); function getPageList(){ //取得屏幕高度 var BodyH = document.documentElement.clientHeight; var store; //model Ext.define('Bussiness', { extend: 'Ext.data.Model', fields: [ {name: 'docCode', type:'string'}, {name: 'serialNumber', type: 'string'}, {name: 'busiType', type: 'string'}, {name: 'formId', type: 'int'}, {name: 'docDate', type: 'string'}, {name: 'channelId', type: 'string'}, {name: 'sdorgId', type: 'string'}, {name: 'aeraId', type: 'string'}, {name: 'comboCode', type: 'string'}, {name: 'packageId', type: 'string'}, {name: 'seriesNumber', type: 'string'}, {name: 'docStatus', type: 'int'} ] }); //jsonStore store =Ext.create('Ext.data.Store',{ model: 'Bussiness', pageSize:10, proxy:{ type: 'ajax', url:'bussinessInfo_list.action', reader:{ type:'json', totalProperty:'recordCount', //总记录数 root:'recordList' //json数据 } } }); //点击下一页时传递搜索框值到后台 store.on('beforeload', function (store, options) { var keyWord=Ext.getCmp('KeyWord').getValue(); var new_params = { searchText:keyWord }; Ext.apply(store.proxy.extraParams, new_params); }); var grid=Ext.create('Ext.grid.GridPanel', { //title: '业务信息', store: store, id:'myGridPanel', forceFit : true, frame: true, //顶部工具栏 查询输入框 tbar: [{ xtype:'label',text:'请输入关键词:' }, { xtype:'textfield',id:'KeyWord' }, { text:'搜索',handler:function(){ //点击搜索按钮将查询条件传递到后台 var keyWord=Ext.getCmp('KeyWord').getValue(); store.load({params:{start:0,limit:10,foo:'bar',searchText:keyWord}}); } } ], columns: [ {header:'订单号',dataIndex:'docCode'}, {header:'流水号',dataIndex:'serialNumber'}, {header:'业务类型',dataIndex:'busiType'}, {header:'业务功能号',dataIndex:'formId'}, {header:'业务时间',dataIndex:'docDate',renderer:function(value){ return new Date(parseInt(value)).toLocaleString().substr(0,19); }}, {header:'渠道信息',dataIndex:'channelId'}, {header:'部门信息',dataIndex:'sdorgId'}, {header:'区域信息',dataIndex:'aeraId'}, {header:'套餐信息',dataIndex:'comboCode'}, {header:'政策信息',dataIndex:'packageId'}, {header:'受理号码',dataIndex:'seriesNumber'}, {header:'订单状态',dataIndex:'docStatus',renderer:function(value){ switch(value){ case 1: return "已经成功生成销售定单" ; break; case 2: return "生成失败" ; break; default: return "" ; break; } }} ], dockedItems: [{ xtype: 'pagingtoolbar', store: store, // GridPanel中使用的数据 dock: 'bottom', displayInfo: true, emptyMsg:"没有数据", height:BodyH+160, displayMsg:"显示从{0}条数据到{1}条数据,共{2}条数据", store:store }], renderTo: Ext.getBody(), listeners: { itemdblclick: this.handlePanelClick } }); var keyWord=Ext.getCmp('KeyWord').getValue(); store.load({params:{start:0,limit:10,foo:'bar',searchText:keyWord}}); } //当gridpanel列表被点击时调用 function handlePanelClick(grid, rowIndex, e){ var docCode=rowIndex.data.docCode; var status=rowIndex.data.docStatus; window.location.href="bussinessInfo_detailes.action?docCode="+docCode+"&docstatus="+status; }
推荐阅读
-
存储过程实现(可带查询条件/万能分页/通用)
-
django项目中的ajax分页和条件查询。
-
sqlserver2000数据库分页查询[根据网上搜索到得sql修改]
-
MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查询条件分页
-
序列化表单为json对象,datagrid带额外参提交一次查询 后台用Spring data JPA 实现带条件的分页查询 多表关联查询
-
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
-
利用PHP访问数据库_实现分页功能与多条件查询功能的示例
-
jQuery条件分页 代替离线查询(附代码)
-
django项目中的ajax分页和条件查询。
-
spring boot新闻管理条件查询分页展示+新增+编辑