关于grid的分页方式我个人理解有两种,我只针对对数据库表或视图的操作思路做一些讲解。
第一种是通过json类的调用,使查询出来的数据格式化,然后传回grid所在页面。在这种方法下,需要.net framework 2.0以上框架和一个json类的支持,当然此方法操作数据表最方便。
第二种则是通过拼接字符串,就可以达到效果。这种方法只需要.net framework1.1框架以上支持就可以了。
下面针对这两种方法做一个讲解。
方法一:此方法还是转载网上流传的PHP的操作。
Gird数据
Grid的分页必须依靠服务端(Server Side)来划分好每一页的数据才可以完成。
本例中的服务端语言是PHP,数据库是MySQL,用来导出一些随机的数据。下列脚本的作用是,获取我们想要的数据,同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。



















由于每个后台开发的环境都不尽相同,所以这里的服务端代码就不细究了。
怎么做一个分页的Grid
本例采用的是ScriptTagProxy,原因是 范例代码 和 服务端代码 不是在同一个服务器上(译注:即“跨域”),而大多数的情况是,在同一个服务器上得到数据,直接用HttpProxy就可以了。
使用DataStore与平时唯一不同的地方,便是需要设置totalProerty属性。本例中,我们从服务端的脚本计算出“total”这个值,告诉DataStore总共有多少个记录,这里指的是所有的记录数。
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'employee_name', mapping: 'name'},
{name: 'job_title', mapping: 'title'},
{name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
{name: 'is_active', mapping: 'active'}
])
});
分页栏Toolbar
这里加入一个分页栏到Grid的面板中,--差不多完成喽。
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: "No results to display"
});
最后传入start和limit参数以初始化数据。
花时间较多的地方是,在后台如何生成数据,以配合Grid的运作,一旦这些工作OK后,分页Grid再不是一件难事了。
如果是用asp.net+sql server 2000 大家则需要通过存储过程来进行对数据表分页的操作。
方法二:
首先来看一下在页面初始化grid的操作:
前台JS:
























































前台HTML:
大家可以看到,在js里面,
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
这里的代码则是对数据的加载。所以可以定义一个全局的变量,在这里我们使用Literal
在前台中加入代码
<asp:Literal Runat="server" ID="LiteralScript"></asp:Literal>
</script>
同时在后台加入
此时在后台,就可以把查询出来的数据,通过
InitScript.Append("从数据表查询出来并格式化后的字符串");
.......
LiteralScript.Text += InitScript.ToString();
这种方式来对myData重新赋值。
具体方式是替换myData中的
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
通过参数start和limit来进行分页的操作了。
在前台加入代码:ds.load({params:{start:0,limit:10}});