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

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

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

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

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

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

 

 

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[i]);
        }
    }
    else
    {
        for(var i=0;i<=InData.d.length-1;i++)
        {
            TempData.d.push(InData.d[i]);
        }
    }
    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",sortable:true
    },
    {
        header:"字段显示名4",dataIndex:"字段4",sortable:true
    },
    {
        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'
        },
        displayInfo:true,
        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,r,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
        }),
        store:DataStore,
        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等类型只要稍加修改同样有效