学习EXT第五日--Grid组件的简易分页

本文介绍了两种Grid分页实现方式,一种是通过JSON类格式化数据并返回页面,适用于.NET Framework 2.0及以上环境;另一种是通过拼接字符串实现,仅需.NET Framework 1.1及以上。详细阐述了每种方法的具体步骤和技术要点。

关于grid的分页方式我个人理解有两种,我只针对对数据库表或视图的操作思路做一些讲解。

第一种是通过json类的调用,使查询出来的数据格式化,然后传回grid所在页面。在这种方法下,需要.net framework 2.0以上框架和一个json类的支持,当然此方法操作数据表最方便。

第二种则是通过拼接字符串,就可以达到效果。这种方法只需要.net framework1.1框架以上支持就可以了。

下面针对这两种方法做一个讲解。

方法一:此方法还是转载网上流传的PHP的操作。

Gird数据

Grid的分页必须依靠服务端(Server Side)来划分好每一页的数据才可以完成。

本例中的服务端语言是PHP,数据库是MySQL,用来导出一些随机的数据。下列脚本的作用是,获取我们想要的数据,同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser"
 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总共有多少个记录,这里指的是所有的记录数。

var ds = new Ext.data.Store({
   
          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 gridFoot = grid.getView().getFooterPanel(true);

      
var paging = new Ext.PagingToolbar(gridFoot, ds, {
          pageSize: 
25,
          displayInfo: 
true,
          displayMsg: 
'Displaying results {0} - {1} of {2}',
          emptyMsg: 
"No results to display"
      });

最后传入startlimit参数以初始化数据。

ds.load({params:{start:0, limit:25}});

花时间较多的地方是,在后台如何生成数据,以配合Grid的运作,一旦这些工作OK后,分页Grid再不是一件难事了。

如果是用asp.net+sql server 2000 大家则需要通过存储过程来进行对数据表分页的操作。

方法二:

首先来看一下在页面初始化grid的操作:

前台JS:

Ext.onReady(function() {
            
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:

<div id="grid-example"></div>

大家可以看到,在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']
            ];

这里的代码则是对数据的加载。所以可以定义一个全局的变量,在这里我们使用Literal

在前台中加入代码

<script language="javascript">    
            
<asp:Literal Runat="server" ID="LiteralScript"></asp:Literal>        
        
</script>

同时在后台加入

protected System.Web.UI.WebControls.Literal LiteralScript;

此时在后台,就可以把查询出来的数据,通过

StringBuilder InitScript = new StringBuilder();    
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}});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值