ExtJs Grid前台分页（假分页）

秒速五厘米 2024-02-19 20:14 30阅读 0赞

Button查询按钮相关js代码

{ xtype:'button',
    	text:'查询',
    	height:20,
    	width:50,
    	style:'margin-left:90px;padding-top:10px',			
    	handler:function(){
    		//获得查询form表单			
    		var fm = Ext.getCmp('leftForm').getForm();
    		var ipGrid = Ext.getCmp('ipGrid');
    		//grid.render('center');
    		if(fm.isValid()){
    			    fm.submit({
    			    waitMsg : '正在提交查询',
    			    method:'POST',
    			    url:'iPQueryStatisticsAction!theLoginIPQuery.action',
    			    success:function(form,action){
    			    	//获得后台传到前台的字符串转化为Json对象			
    			    	var result = Ext.util.JSON.decode(action.response.responseText);
    			    	//获得Json对象中data数据（result为键）
    			    	var datas = result.success.result;
    			    	//获得grid
    			    	var grid =new Ext.keqi.BuildIpGridPanel({
    					id:'ip',
    					title:'登录明细查询结果',
    					datas:datas
    				});
    				var p = Ext.getCmp('center');
    				p.add(grid);
    				p.doLayout();
    			   }.createDelegate(this)			    						  		  				
    			});
    		}	
    	}.createDelegate(this)
    }

gridPanel相关JS代码（红色为需要特别注意的地方）

var store = new Ext.data.Store({
    	id:'st',
    	//this.datas为上段代码中求得的datas(获得Json对象中data数据)而且需要使用Ext.ux.data.PagingMemoryProxy需要先导入PagingMemoryProxy.js
    	proxy:Ext.ux.data.PagingMemoryProxy(this.datas),
    	remoteSort:true,	
    	//若不是JsonReader则可能不显示数据
    	reader: new Ext.data.JsonReader({
    		/*totalProperty:'totalProperty',
    		root:'result',
    		successProperty:'success',*/
    		fields:[
    			{name : 'id',type:'int'},
    			{name : 'loginId',type:'String'},
    			{name : 'userName',type:'String'},
    			{name : 'time',type:'String'}, 
    			{name : 'userAddress',type:'String'}, 
    			{name : 'peroidOfTime',type:'String'},
    			{name : 'theLoginAddress',type:'String'}, 
    			{name : 'loginTimes',type:'String'} 
    		]
    	})
    });	
    		
    var cm=new Ext.grid.ColumnModel({
    	columns:[
    	        {header:'序号',hidden:false,width:60,dataIndex:'id'},			        
    		{header:'用户ID',hidden:this.hiddenId,width:150,dataIndex:'loginId'},
    		{header:'账户',hidden:this.hiddenAccount,width:100,dataIndex:'userName'},
    		{header:'登录时间',hidden:this.hiddenTime,width:200,dataIndex:'time',
    				renderer:function(a){
    				var s=parseInt(a);
    				if(isNaN(s)){
    					return new Date().format("Y-m-d H:i:s");
    				}else{
    					return new Date(s).format("Y-m-d H:i:s");
    				}						
    		}},
    		{header:'登录IP',hidden:this.hiddenIp,width:150,dataIndex:'userAddress'},
    		{header:'时间段',hidden:this.hiddenProid,dataIndex:'peroidOfTime'},
    		{header:'地市',hidden:this.hiddenCity,dataIndex:'theLoginAddress'},
    		{header:'登陆次数',hidden:this.hiddenNums,dataIndex:'loginTimes'}
    		]					
    });
    		
    this.grid = new Ext.grid.GridPanel({
    		id:'ipGrid',
    		//enableColumnMove: false, 
    		viewConfig:{
    			forceFit:true
    		},
    		store:store,
    		cm:cm, 
    		bbar: new Ext.PagingToolbar({
    			pageSize:15,
    			store:store,
    			displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
    	           	emptyMsg: '没有记录',
    			displayInfo:true,
    			plugins : [new Ext.zz.PageSizePlugin()]
    		})
    	});	
    		
    store.load({params:{start:0,limit:15}})

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关 ExtJs Grid前台分页（假分页）

Button查询按钮相关js代码 { xtype:'button', text:'查询', height:20, width:50,

秒速五厘米/ 2024年02月19日 20:14/ 0 赞/ 31 阅读

相关 jsp假分页

jsp假分页思路：先查到所有数据，放到arraylist中，再根据页码确定每一页的记录数范围，每次只向jsp视图转发指定页码的指定记录主要代码如下： 2个p

╰半夏微凉°/ 2024年02月19日 12:56/ 0 赞/ 12 阅读

相关 vue 假分页

vue3 const pageContent = reactive({ cur: 1, total: 0,

今天药忘吃喽~/ 2022年11月20日 10:55/ 0 赞/ 154 阅读

相关 ExtJs 初学——php分页

分页搞了两三天，终于弄好啦！送给初学者，避免走弯路啊！ userList.html var itemsPerPage =2;//分页大小 var s

「爱情、让人受尽委屈。」/ 2022年08月12日 09:58/ 0 赞/ 167 阅读

相关 jsp假分页示例

在web开发过程中，不可避免的需要使用到分页的功能，jsp分页一般有真分页和假分页。例如mysql：真分页意思就是用limit查询语句从后台检索出结果集传回jsp页面显示。

我不是女神ヾ/ 2022年08月12日 01:25/ 0 赞/ 140 阅读

相关 JQuery EasyUI Grid 分页

以下示例使用JQuery Easy UI、Spring MVC：首先定义一个DataGrid： <table style="background:none!imp

小灰灰/ 2022年08月10日 14:43/ 0 赞/ 197 阅读

相关 extjs分页以及查询分页

1、List.js ：view Ext.define('RCP.view.customer.List', { extend: 'Ext.grid.Pa

妖狐艹你老母/ 2022年08月08日 06:13/ 0 赞/ 329 阅读

相关 Extjs6 grid带参数分页查询 store beforeload

store.on('beforeload', function (store, options) \{ var new\_params =

淩亂°似流年/ 2022年08月05日 08:25/ 0 赞/ 164 阅读

相关 jsp前台分页逻辑

![20171220210428166][] 如图所示分页逻辑代码： <div class="row"> <div class="p

谁践踏了优雅/ 2022年06月03日 06:25/ 0 赞/ 181 阅读

相关 ext前台分页

var store = new Ext.data.Store(\{ id: 'JsonStore1', //model:msg.fieldNames,

Dear 丶/ 2022年05月31日 04:23/ 0 赞/ 164 阅读