ExtJS中Grid分页

最新推荐文章于 2021-02-23 12:23:49 发布

laironggui

最新推荐文章于 2021-02-23 12:23:49 发布

阅读量538

点赞数

分类专栏： ExtJS 文章标签： extjs header string integer query border

本文链接：https://blog.csdn.net/laironggui/article/details/8085253

版权

ExtJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简单记录关键代码，备忘、、、

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();
        }
    }