ExtJS中从WebService获取数据保存到本地，填充GridPanel实现静态数据分页

最近做一个网站，无意中发现竟然有ExtJS这样美妙的东西

于是后台就用ExtJs来做了，做的时候碰到一个问题

就是GridPanel只能对动态数据进行分页，而之前业务层已经全部写好了，再修改实在不方便

而且网站数据量不大，所以就想能不能先把数据全部获取到本地，然后再对本地数据进行分页

琢磨了好几天，结合网上一些人的方法，初步实现了一套方法，全部代码如下，注释有说明


代码

Code

[copy to clipboard]

CODE:

var Data;//存储获取的数据var DataStore;//数据存储器var Pager;//分页器var PerCount;//每页的数据量var Grid;//GridPanel容器function GetDataFromWebService()//从WebService获取数据{    Ext.Ajax.request(    {        url:'WebService.asmx/GetData',        method:'POST',        jsonData:        {            Parameter1:‘参数值’        }       ,        success:OnGetDataSuccess,        failure:OnGetDataFail    }    );}function OnGetDataSuccess(request,options)//数据获取成功{    Data=Ext.util.JSON.decode(request.responseText);    //将获取的Json数据格式化    DataStore.loadData(GetPagerData(Data),false);    DataStore.load();    //这个很重要    Pager.doLoad(0);    //这个很重要}function OnGetDataFail(request,options)//获取数据失败{    alert('失败了！');}function GetPagerData(InData)//从静态数据中获取每页的数据{    var TempData=//为什么要用'd'作为json数据的根，因为从WebService获取Json数据经查看就是以'd'为根的    {        'd':[]    };    if(InData.length>PerCount)    {        for(var i=0;i<=PerCount-1;i++)        {            TempData.d.push(InData.d);        }    }    else    {        for(var i=0;i<=InData.d.length-1;i++)        {            TempData.d.push(InData.d);        }    }    return TempData;}function SerGrid();{    Data=//获取数据之前的Loading数据    {        'd':[        {            '字段1':'数据载入中','字段2':'数据载入中','字段3':'数据载入中','字段4':'数据载入中','字段5':'数据载入中'        }        ]    };    DataStore=new Ext.data.Store(    {        //数据存储器        proxy:new Ext.data.MemoryProxy(GetPagerData(Data)),        reader:new Ext.data.JsonReader(        {            root:'d'        },        [        {            name:'字段1'        },        {            name:'字段2'        },        {            name:'字段3'        },        {            name:'字段4'        },        {            name:'字段5'        }        ])    });    var ColM=new Ext.grid.ColumnModel(//行定义器    [    {        header:"字段显示名1",dataIndex:"字段1"，sortable:true    },    {        header:"字段显示名2",dataIndex:"字段2",sortable:true    },    {        header:"字段显示名3",dataIndex:"字段3",    {        header:"字段显示名4",dataIndex:"字段4",    {        header:"字段显示名5",dataIndex:"字段5",sortable:true    }    ]);    Pager=new Ext.PagingToolbar(    {        id:'Grid_Pager',        pageSize:PerCount,        store:DataStore,        displayInfo:true,        paramNames:        {            start:'start',limit:'limit',cid:'cid'        },        displayMsg:'显示第 {0} 条到 {1} 条记录，一共 {2} 条',        emptyMsg:'没有数据',        updateInfo:function ()//重写UpdateInfo        {            if(this.displayEl)            {                var count=this.store.getCount();                var msg=count==0?this.emptyMsg:String.format(this.displayMsg,this.cursor+1,Math.min(this.cursor+this.pageSize-1,Data.d.length-1)+1,Data.d.length);                this.displayEl.update(msg);            }        },        onLoad:function (store,r,o)//重写OnLoad        {            if(!this.rendered)            {                this.dsLoaded=[store,o];                return ;            }            var d=this.getPageData(),ap=d.activePage,ps=d.pages;            this.afterTextEl.el.innerHTML=String.format(this.afterPageText,d.pages);            this.field.dom.value=ap;            this.first.setdisabled(ap==1);            this.prev.setdisabled(ap==1);            this.next.setdisabled(ap==ps);            this.last.setdisabled(ap==ps);            this.loading.enable();            this.updateInfo();        },        doLoad:function (start)//重写doLoad        {            var TempData=            {                'd':[]            };            var i=0;            var len=this.pageSize;            for(i=0;i<len;i++)            {                if(Data.d[start+i]!=null)                {                    TempData.d.push(Data.d[start+i]);                }            }            this.store.loadData(TempData,false);        },        getPageData:function ()//重写getPageData        {            var total=Data.d.length;            return            {                total:total,                activePage:Math.ceil((this.cursor+this.pageSize)/this.pageSize),                pages:total<this.pageSize?1:Math.ceil(total/this.pageSize)            };        },        onClick:function (which)//重写onClick        {            switch(which)            {                case "first":                this.doLoad(0);                break;                case "prev":                var t=this.cursor;                this.cursor=Math.max(0,t-this.pageSize);                this.doLoad(Math.max(0,t-this.pageSize));                break;                case "next":                var t=this.cursor;                this.cursor=t+this.pageSize;                this.doLoad(t+this.pageSize);                break;                case "last":                var total=Data.d.length;                var extra=total%this.pageSize;                var lastStart=extra?(total-extra):total-this.pageSize;                this.cursor=extra?(total-extra):total-this.pageSize;                this.doLoad(lastStart);                break;                case "refresh":                var t=this.cursor;                this.cursor=t;                this.doLoad(t);                break;            }        }    });    Grid=new Ext.grid.GridPanel(    {        cm:ColM,        sm:new Ext.grid.RowSelectionModel(        {            singleSelect:true        }),        loadMask:        {            msg:'正在统计，请稍候.'        },        id:'Grid',        title:'Grid',        autoHeight:true,        autoWidth:true,        bbar:Pager    });    DataStore.load();    //这个很重要，用来显示Loading数据}funtionMain(){    Grid.render(Ext.getBody());    GetDataFromWebService();}

主要的两个步骤就是重写GridPanel和从WebService获取数据 这样就可以实现静态Json数据在GridPanel里的分页了 我的WebService里输出的是一个Linq查询的ToList,Json数据的根为'd',其他的没有测试过 不过相信DataSet等类型只要稍加修改同样有效 （文/ryyd  出处/博客园）