键键的专栏

永远的键键

用户操作

[留言] [发消息] [加为好友]

订阅我的博客

[编辑]lilinjian2001的公告

News <br> 新浪快报： <table border=0 cellspacing=1 cellpadding=0 width='98%'> <tr align=center><td colspan=15 align=center bgcolor='#FFFFFF' height="30"><iframe name=sina_roll src=http://news.sina.com.cn/o/allnews/input/index.html height="15" width="150" Frameborder="No" Border="0" Marginwidth="0" Marginheight="0" Scrolling="No"></iframe></td></tr> </table> <br> <embed src="http://www.clocklink.com/Clocks/0001-Red.swf?TimeZone=CCT" width="150" height="150" wmode="transparent" type="application/x-shockwave-flash"> <br> <br> <p><b>今日天气</b><br> <center><iframe width=157 height=240 frameborder=0 scrolling=NO src='http://appnews.qq.com/cgi-bin/news_qq_search?city=%D6%D8%C7%EC&cl=3'></iframe></center> <br> <br> <FONT style="BACKGROUND-COLOR: #ffffff" face="" color=#ff0000>———————————</FONT> <br> <FONT style="BACKGROUND-COLOR: #ffffff" face="" color=#ff0000>E-mail:</FONT> <br><FONT style="BACKGROUND-COLOR: #ffffff" face="" color=#ff0000>lilinjian2001@163.com</FONT> <br>

[编辑]文章分类

[编辑]E书下载

[编辑]友情链接

zjcxc(邹建)的Blog - SQL Server

[编辑]源码下载

存档

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

关于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"
      });

最后传入start和limit参数以初始化数据。

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：

大家可以看到，在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

在前台中加入代码

同时在后台加入

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}});

发表于 @ 2008年01月22日　11:06:00 | 评论( loading... ) | 编辑| 举报| 收藏