关于grid的分页方式我个人理解有两种,我只针对对数据库表或视图的操作思路做一些讲解。
第一种是通过json类的调用,使查询出来的数据格式化,然后传回grid所在页面。在这种方法下,需要.net framework 2.0以上框架和一个json类的支持,当然此方法操作数据表最方便。
第二种则是通过拼接字符串,就可以达到效果。这种方法只需要.net framework1.1框架以上支持就可以了。
下面针对这两种方法做一个讲解。
方法一:此方法还是转载网上流传的PHP的操作。
Gird数据
Grid的分页必须依靠服务端(Server Side)来划分好每一页的数据才可以完成。
本例中的服务端语言是PHP,数据库是MySQL,用来导出一些随机的数据。下列脚本的作用是,获取我们想要的数据,同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。
or die ( " Could not connect " );
mysql_select_db ( " test " ) or die ( " Could not select database " );
$sql_count = " SELECT id, name, title, hire_date, active FROM random_employee_data " ;
$sql = $sql_count . " LIMIT " . $_GET [ ' start ' ] . " , " . $_GET [ ' limit ' ];
$rs_count = mysql_query ( $sql_count );
$rows = mysql_num_rows ( $rs_count );
$rs = mysql_query ( $sql );
while ( $obj = mysql_fetch_object ( $rs ))
{
$arr [] = $obj ;
}
Echo $_GET [ ' callback ' ] . ' ({"total":" ' . $rows . ' ","results": ' . json_encode( $arr ) . ' }) ' ;
由于每个后台开发的环境都不尽相同,所以这里的服务端代码就不细究了。
怎么做一个分页的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:
var 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']
];
var ds = new Ext.data.Store(...{
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader(...{}, [
...{name: 'company'},
...{name: 'price', type: 'float'},
...{name: 'change', type: 'float'},
...{name: 'pctChange', type: 'float'},
...{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([
...{id: "company", header: "Company", width: 120, sortable: true, dataIndex: 'company'},
...{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
...{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
...{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
...{header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
var grid = new Ext.grid.GridPanel(...{
el:'grid-example',
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});
grid.render();
grid.getSelectionModel().selectFirstRow();
} );
前台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}});