ExtJS中从WebService获取数据保存到本地，填充GridPanel实现静态
发布时间：2020-12-17 02:37:14 所属栏目：安全 来源：网络整理
导读：最近做一个网站，无意中发现竟然有ExtJS这样美妙的东西 于是后台就用ExtJs来做了，做的时候碰到一个问题 就是GridPanel只能对动态数据进行分页，而之前业务层已经全部写好了，再修改实在不方便 而且网站数据量不大，所以就想能不能先把数据全部获取到本地，
|
最近做一个网站，无意中发现竟然有ExtJS这样美妙的东西
于是后台就用ExtJs来做了，做的时候碰到一个问题 就是GridPanel只能对动态数据进行分页，而之前业务层已经全部写好了，再修改实在不方便 而且网站数据量不大，所以就想能不能先把数据全部获取到本地，然后再对本地数据进行分页 琢磨了好几天，结合网上一些人的方法，初步实现了一套方法，全部代码如下，注释有说明 代码
[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();} （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
