GT-Grid 1.0 基础教程(三)
[size=large][b]教程说明:[/b][/size]
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看[color=blue]其他教程[/color],以及最新版本信息,请[url="http://fins.iteye.com/blog/214290"]点击这里[/url]
[size=large][b]第三章: 没有分页怎么行[/b][/size]
通过前两章的介绍,我相信大家应该可以很轻松的创建出一个"纯客户端只读列表".
但是作为列表, 数据多的时候, 不采用分页怎么行呢?
下面就让我们一起来把上一章中的列表变成 "支持客户端分页的纯客户端只读列表".
还是那句话:
在开始之前,为了保留我们之前的成果,不至于学习的过程中把前一个成果弄坏, 我们将"mydemo2.html"另存为"mydemo3.html".
OK,开始.
[color=green]=========================================[/color]
[b]1 准备测试数据 [/b]
既然要分页 我们就要有很多数据才行. 之前那么几条 显然是太少了.
那么 我们就先来编写一个函数 来自动生成很多很多的测试数据吧 (这个函数你也可以自己写,没必要读下面这段代码).
现在预览一下页面, 会看到一个有200条数据的大列表.
[color=green]=========================================[/color]
[b]2 分页 [/b]
现在我们要对他进行分页. 通过给 grid对象设置"pageSize"属性来实现.
只有 这个属性还不够, 它只是实现了分页, 但是列表必须要有导航按钮 才能在各个页面之间"穿梭".
这个我们通过 修改 toolbarContent 的内容来实现.
为 toolbarContent 加入了 nav 和 一个竖线, 大家要注意, nav ,| ,state 三者之间有空格间隔.
nav代表的就是 导航按钮区.
导航区中包含了 四个按钮: 第一页 前一页 后一页 最后一页. 有时候也许我们还需要一个"直接调转到指定页"的功能.
我们可以通过 给 toolbarContent 加入 "goto" 子属性来实现这个功能.
OK,现在这个完整的分页按钮区就算是完成了
现在预览一下吧, 会看到一个共有200条数据,但每页只有10条的列表.
[color=green]=========================================[/color]
[b]2 页大小选择框 [/b]
通常pageSize这个属性是固定的,但是也有一些场景,希望用户可以在查看列表时自由的改变这个大小.
那么我们就需要提供一个"页大小选择框"来实现这个需求. 按下面所示修改代码.
pageSizeList 是一个数组,列出了将要出现在下拉列表里的可供选择的"页大小".
toolbarContent 中也增加了一项 pagesize .
toolbarContent 中的 各个工具区域的位置是可以调整的, 大家可以根据自己的习惯来设置, 例如下面的设置方法都是合法的:
toolbarContent : 'nav | pagesize | goto | state' ,
toolbarContent : 'goto | nav | pagesize | state' ,
... ...
[color=green]=========================================[/color]
这一章讲解了 分页的一些基本知识, 内容比较少,但是非常重要.
下一章开始 将讲解激动人心的"非纯客户端只读列表"的实现了, 敬请期待.
Over! See you tonight or tomorrow :) .
[color=green]=========================================[/color]
最后的成果图:
[img]http://fins.iteye.com/upload/picture/pic/17852/6e761ede-569f-3912-888e-5acb7bf59bff.jpg[/img]
[size=large][b]教程说明:[/b][/size]
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看[color=blue]其他教程[/color],以及最新版本信息,请[url="http://fins.iteye.com/blog/214290"]点击这里[/url]
[size=large][b]第三章: 没有分页怎么行[/b][/size]
通过前两章的介绍,我相信大家应该可以很轻松的创建出一个"纯客户端只读列表".
但是作为列表, 数据多的时候, 不采用分页怎么行呢?
下面就让我们一起来把上一章中的列表变成 "支持客户端分页的纯客户端只读列表".
还是那句话:
在开始之前,为了保留我们之前的成果,不至于学习的过程中把前一个成果弄坏, 我们将"mydemo2.html"另存为"mydemo3.html".
OK,开始.
[color=green]=========================================[/color]
[b]1 准备测试数据 [/b]
既然要分页 我们就要有很多数据才行. 之前那么几条 显然是太少了.
那么 我们就先来编写一个函数 来自动生成很多很多的测试数据吧 (这个函数你也可以自己写,没必要读下面这段代码).
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条数据的大列表.
[color=green]=========================================[/color]
[b]2 分页 [/b]
现在我们要对他进行分页. 通过给 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条的列表.
[color=green]=========================================[/color]
[b]2 页大小选择框 [/b]
通常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' ,
... ...
[color=green]=========================================[/color]
这一章讲解了 分页的一些基本知识, 内容比较少,但是非常重要.
下一章开始 将讲解激动人心的"非纯客户端只读列表"的实现了, 敬请期待.
Over! See you tonight or tomorrow :) .
[color=green]=========================================[/color]
最后的成果图:
[img]http://fins.iteye.com/upload/picture/pic/17852/6e761ede-569f-3912-888e-5acb7bf59bff.jpg[/img]