javascript
ExtJS中Grid分页
簡單記錄關鍵代碼,備忘、、、
1。定義一個jsonStore
??????? this.store = new Ext.data.JsonStore({
??????????? root: 'data',
??????????? totalProperty: 'totalCount',
??????????? idProperty: 'id',
??????????? remoteSort: true,
??????????? fields: [
??????????????? {name: 'id',type:'integer'},
{name: 'name',type:'string'},
??????????????? {name: 'sex',type:'string'},
??????????????? {name: 'dept',type:'string'}
??????????? ],
??????????? proxy: new Ext.data.HttpProxy({
??????????????? url: 'php/getInfoList.php?requesttype=GETUSERSLIST',
??????????????? method: 'GET'
??????????? })
??????? });
??????? this.store.setDefaultSort('id', 'asc');
??????? this.store.load({
??????????? params:{
??????????????? start:0,
??????????????? limit:25? //每次讀取25條記錄
??????????? }
??????? });
2。定義一個GridPanel
this.UsersGridList=new Ext.grid.GridPanel({
??????? width:700,
??????? height:500,
??????? store: this.store,
??????? loadMask: true,
??????? frame:true,
??????? layout:'fit',
??????? region: 'center',
??????? border: false,
?????? columns: [
??????? new Ext.grid.RowNumberer(),
??????? {
??????????? id:"id",
??????????? header: 'ID',
??????????? dataIndex: 'id',
??????????? sortable: true,
??????????? width:30
??????? },{
??????????? header: '姓名'
??????????? dataIndex: 'yhzt',
??????????? sortable: true,
??????????? width:80
??????? },{
??????????? header: '性別',
??????????? dataIndex: 'sex',
??????????? sortable: true
??????? },{
??????????? header: '工作單位'
??????????? dataIndex: 'dept',
??????????? sortable: true,
??????? }
?????? ],
??????? bbar:new Ext.PagingToolbar({
??????????? width:'100%',
??????????? store:this.store,
??????????? pageSize:25,
??????????? displayInfo:true,
??????????? displayMsg:'當前顯示第 {0} - {1} 條記錄/共{2}條記錄',
??????????? emptyMsg:'當前無記錄'
??????? })
??? });
3。php服務器端處理請求//
/**
???? * 獲取用戶信息列表
???? * 返回的格式為:
???? * {"success":true,"message":"獲取用戶信息列表成功","requesttype":"GETUSERSLIST",
???? * "data":
???? *????? [
???? *????????? {id:1,name:"管理員',sex:“男”,dept:"管理局"},
???? *????????? ...
???? *????? ]
???? * }
???? *
???? */
??? function processUsersList() {
??????? $query = "select count(*) from yonghu";
??????? if(! ($rs=$this->executeSQL($query)))??? return;
??????? $this->mReturns["totalCount"] = $rs->fields[0];
??????? $this->mSQL = "select id , name , sex , dept from yonghu order by {$_REQUEST['sort']} {$_REQUEST['dir']}
??????????????????? limit {$_REQUEST['limit']} offset {$_REQUEST['start']};";
??????? if(! ($rs=$this->executeSQL($this->mSQL)))??? return;
??????? $this->mReturns["success"] = true;
??????? $this->mReturns["requesttype"] = $_REQUEST['requesttype'];
??????? $this->mReturns["message"] = '獲取用戶信息列表成功';
??????? $this->mReturns["data"] = array();
??????? $i = 0;
??????? while(!$rs->EOF) {
??????????? $this->mReturns["data"][$i]["id"] = $rs->fields[0];
??????????? $this->mReturns["data"][$i]["name"] = $rs->fields[1];
??????????? $this->mReturns["data"][$i]["sex"] = $rs->fields[2];
??????????? $this->mReturns["data"][$i]["dept"] = $rs->fields[3];
??????????? $i++;
??????????? $rs->MoveNext();
??????? }
??? }
?
總結
以上是生活随笔為你收集整理的ExtJS中Grid分页的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Windows常见事件ID
- 下一篇: 小程序--错误{errcode:4002