GT-Grid 1.0 基础教程(三)

GT-Grid 1.0 基础教程(三)

教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里


第三章: 没有分页怎么行

通过前两章的介绍,我相信大家应该可以很轻松的创建出一个"纯客户端只读列表".
但是作为列表, 数据多的时候, 不采用分页怎么行呢?

下面就让我们一起来把上一章中的列表变成 "支持客户端分页的纯客户端只读列表".
还是那句话:
在开始之前,为了保留我们之前的成果,不至于学习的过程中把前一个成果弄坏, 我们将"mydemo2.html"另存为"mydemo3.html".
OK,开始.


=========================================


1 准备测试数据

既然要分页 我们就要有很多数据才行. 之前那么几条 显然是太少了.
那么 我们就先来编写一个函数 来自动生成很多很多的测试数据吧 (这个函数你也可以自己写,没必要读下面这段代码).

	function getClientTestData(max){
		max=max||100;
		var getInt=function(min,max) {
				min = min || 0;
				max = max || 100;
				var _min= Math.min(min,max);
				max=Math.max(min,max);
				min=_min;
				var step= max - min +1;
				var s= (Math.random()+1)*max*10 % step;
				var num= min +  s ;
				return parseInt(num,10);
		}

		var data=[];
		var gl=['M','F','U'];
		for (var i=0;i<max;i++){
			var record={ no : 30+i , 
					name : 'abc'+i , 
					age :getInt(12,15) , 
					gender : gl[getInt(1,9)%3] , 
					english : 50+getInt(1,49), 
					math : 40+getInt(1,59)
				}
			data.push(record);
		}
		return data;	
	}

// 然后执行下面的语句, 客户端的数据就会有200条. (作为测试,我没有生成太多).
var data1 = getClientTestData( 200 );

现在预览一下页面, 会看到一个有200条数据的大列表.


=========================================


2 分页

现在我们要对他进行分页. 通过给 grid对象设置"pageSize"属性来实现.

var gridConfig={
	/* ... 其他属性设置略 ... */
	pageSize : 10 
}

只有 这个属性还不够, 它只是实现了分页, 但是列表必须要有导航按钮 才能在各个页面之间"穿梭".
这个我们通过 修改 toolbarContent 的内容来实现.

var gridConfig={
	/* ... 其他属性设置略 ... */
	toolbarContent : 'nav | state' 
}

为 toolbarContent 加入了 nav 和 一个竖线, 大家要注意, nav ,| ,state 三者之间有空格间隔.
nav代表的就是 导航按钮区.


导航区中包含了 四个按钮: 第一页 前一页 后一页 最后一页. 有时候也许我们还需要一个"直接调转到指定页"的功能.
我们可以通过 给 toolbarContent 加入 "goto" 子属性来实现这个功能.

	toolbarContent : 'nav | goto | state' 

OK,现在这个完整的分页按钮区就算是完成了


现在预览一下吧, 会看到一个共有200条数据,但每页只有10条的列表.


=========================================


2 页大小选择框

通常pageSize这个属性是固定的,但是也有一些场景,希望用户可以在查看列表时自由的改变这个大小.
那么我们就需要提供一个"页大小选择框"来实现这个需求. 按下面所示修改代码.

var gridConfig={
	/* ... 其他属性设置略 ... */
	toolbarContent : 'nav | goto | pagesize | state' ,

	pageSize : 10 ,
	
	pageSizeList : [5,10,15,20]
}

pageSizeList 是一个数组,列出了将要出现在下拉列表里的可供选择的"页大小".
toolbarContent 中也增加了一项 pagesize .



toolbarContent 中的 各个工具区域的位置是可以调整的, 大家可以根据自己的习惯来设置, 例如下面的设置方法都是合法的:

toolbarContent : 'nav | pagesize | goto | state' ,
toolbarContent : 'goto | nav | pagesize | state' ,
... ...


=========================================



这一章讲解了 分页的一些基本知识, 内容比较少,但是非常重要.
下一章开始 将讲解激动人心的"非纯客户端只读列表"的实现了, 敬请期待.

Over!  See you tonight or tomorrow .


=========================================


最后的成果图:

评论

9 楼 liujunsong 2009-04-23  

fins的GT-Grid已经出来很久了.
也下载了一个版本看了看.
不过有一个问题始终不是太明白.
这个东西设计的目的是啥呢,要解决啥问题呢?
如果仅仅是要解决一个把数据按照grid方式显示出来的问题,代价是不是太大了些呢?

8 楼 blueskyzs 2009-04-23  

zhangliangzln 写道

出来了，原来是我的桌面颜色正好把表格下面的导航栏颜色覆盖了

朋友,我也到你这种情况,你是怎么解决的呢?这个不是在页面里面跟桌面颜色有什么关系呢.

7 楼 zhangliangzln 2009-03-12  

出来了，原来是我的桌面颜色正好把表格下面的导航栏颜色覆盖了

6 楼 zhangliangzln 2009-03-12  

toolbarContent : ' nav | goto | state'
我是这样写的，但是导航栏没有出来，只有后面的两个

5 楼 waomaowei 2008-08-22  

不知道效率怎么样？

4 楼 fins 2008-07-15  

gt和ec不是一种东西 你需要换个角度来思考.

var gridConfig={

	id : "grid1",
	
	dataset : dsConfig ,
         
        ... ...
    
	beforeLoad : function(){
		this.loadURL=....
	}
	
};

var mygrid=new GT.Grid( gridConfig );

这样就可以了  或者是 后期在用
mygrid.beforeLoad=function(){
.....
}

这个数据相对高一些的知识点了 以后的教程会提到

3 楼 flyrambler 2008-07-15  

引用

其实你可以在 beforeLoad里 改变 grid的loadURL

原来还真能改啊，可是请问beforeLoad是在哪个文件呢？我找了源文件，似乎没有。
顺便问一下，主要的脚本文件是在gt_grid_all.js里吗？这个文件似乎是个计算函数，并没有原来ecside一些常见的脚本动作啊。

2 楼 fins 2008-07-14  

nav 表示导航栏 整个导航栏

你这个需求比较有意思

其实你可以在 beforeLoad里 改变 grid的loadURL
beforeLoad是一个事件)

1 楼 flyrambler 2008-07-14  

我想请教一下，

引用

gridConfig中的toolbarContent : 'nav | pagesize | state' ,

，这里的nav表示下一页的意思吗？如果是，请问调用它的脚本在哪里？由于我一次只能从数据源读取一页，我想修改这个下一页链接来读取不同数据源的下一页数据。我找了半天脚本，似乎也没有找到。谢谢了！