GT-Grid 1.0 基础教程(一)

fins

浏览: 2610846 次
性别:
来自: 小胖儿的大城

最近访客更多访客>>

快了的男孩

sagadan

fancycat

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

GT-Grid

JavaScript json 数据结构 Ajax IE

GT-Grid 1.0 基础教程(一)

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

第一章: 从"纯客户端只读列表"开始

本章将演示如何开发出一个纯客户端只读列表(数据已经在客户端存在,列表只是用来显示这些数据,没有CRUD功能).
同时演示了如何使用设置一些属性,来达到个性化的需求.

虽然本章教程的内容未必能够满足你的需求, 但是它却是GT-Grid使用的基础,
在你完全掌握该章的内容之前, 我并不建议你去接触后面的章节.

另外可能有一部分朋友会觉得,这个教程写的太啰嗦了有些地方太基础了.
没错我就是要啰嗦点基础点.
因为我假想的对象是从来没接触过任何基于ajax技术的列表组件的人(但是有一定的js基础,而且知道json是啥).

开始教程前, 请先建立一个"练习文件", 可以起名叫"mydemo1.html", 内容如下 : (建议编码为UTF-8,具体引入的文件路径请根据情况自己修改)


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>GT-Grid 教程示例</title>

<link rel="stylesheet" type="text/css" href="./gt_grid.css" />
<script type="text/javascript" src="./gt_msg_cn.js"></script>
<script type="text/javascript" src="./gt_grid_all.js"></script>
<script type="text/javascript" >
// 教程中的代码就写在这个区域里.


</script>
</head>

<body>
<!-- grid的容器. -->
<div id="grid1_container" style="width:700px;height:300px">
</div>

 </body>
</html>

好了让我开始 GT-Grid的启航之旅吧.

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

一个完整GT-Grid 由3部分组成:
1 数据.
数据必须为一个json数组, 数组中的每一项为一个 js对象/js数组.例如下面两种形式的数据都是可以的.(但是不能混合使用).
数组中的每一项代表单条数据. 以下简称 record.

假设有这样一组数据 (学生信息)


var data1 = [
   { no : 1 , name :'aaa', age : 12, gender : 'M' , english : 76.5 , math :92 },
   { no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89   , math :87 },
   { no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53   , math :62 }

];

var data2 = [
   [ 1 , 'aaa',  12,  'M' , 76.5 , 92 ],
   [ 2 , 'bbb',  11,  'F' , 89   , 87 ],
   [ 3 , 'ccc',  13,  'F' , 53   , 62 ]
]

我更推荐使用第一种,虽然也许有人认为数组应该"速度更快,占用的内存更少,传输时占用的贷款更少....",
但是这样的优势在实际使用中并不明显. 而且当和后台数据结合起来之后, 你会发现,
绝大多数 json的第三方转换工具都会将pojo map等转换成第一种形式的json数据.
而且也更便于反向转换.

当然对于第2钟GT-Grid也是支持的, 稍后我会讲解. 目前本例以及我以后所写的其他教程 ,都将以第一种形式的数据作为示例.

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

2 数据集(dataset)
有了数据还不够, 因为GT-Grid未必就能理解这些数据, 你还需要对数据进行简单的描述.这个描述就是定义数据集.
前面提到的 data1 对应的数据集完整定义如下:

var dsConfig= {
	data : data1

	fields :[
		{name : 'no'     ,  type: 'int'     , index : 'no'      },
		{name : 'name'   ,  type: 'string'  , index : 'name'    },
		{name : 'age'    ,  type: 'int'     , index : 'age'     },
		{name : 'gender' ,  type: 'string'  , index : 'gender'  },
		{name : 'english',  type: 'float'   , index : 'english' },
		{name : 'math'   ,  type: 'float'   , index : 'math'    }
	]
}

data 指向之前的数据.
fields 是一个数组, 描述record各个字段的信息,类似数据库表中的列信息.

name :  字段的名字 (虽然时name 但是性质和id类似, 在一个数据集内要保持唯一性)
type :　字段的类型  ( 目前只支持 string ,int, float , 为什么没有date类型?因为我觉得没必要,以后我会找机会解释一下我的想法和建议) 
index　: 字段对应的"record的属性名". 根据index,GT-Grid就可以知道这一列 对应的时record哪个属性的值.

当 type 为 string 时, 可省略type设置.
当 index 和 name 一致时, 可省略 index设置.
所以一个简化后的定义为:

var dsConfig= {
	data : data1 ,

	fields :[
		{name : 'no'     ,  type: 'int'    },
		{name : 'name'      },
		{name : 'age'    ,  type: 'int'    },
		{name : 'gender'    },
		{name : 'english',  type: 'float'  },
		{name : 'math'   ,  type: 'float'  }
	]
};

如果你的record时数组,而不是json-object (就是前面提到的 data2 ),
那么 index 就应该为 0 ,1 ,2 ....等等, 用来表示该列对应record中的第几条数据.

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

3 GT-Grid组件.
第三部分就是定义并创建GT-Grid对象.创建GT-Grid对象的方法如下:

var mygrid1 = new GT.Grid( { /*...一些配置信息...*/ }  );

我个人比较习惯将 new GT.Grid的大段的参数单独声明. 一个简单的例子如下:

var gridConfig={

	id : "grid1",
	
	dataset : dsConfig ,

	columns : colsConfig ,

	container : 'grid1_container', 

	toolbarPosition : 'bottom',

	toolbarContent : 'state'

};

var mygrid=new GT.Grid( gridConfig );

id : 每个列表组件都有一个id 该id在页面内唯一.
dataset :列表对应的数据集
columns　:　??? 这是什么 ??? 别急.
container : 列表的容器的id. 列表最后是要显示在页面中某个位置.这个容器就是那个"位置",通常是一个div或者时td.
toolbarPosition : 工具栏的位置. 可选值:'top'/'bottom'/null,  暂时不支持上下都显示.
toolbarContent : 工具栏上要显示的东西, state表示的数据数量信息(分页信息),如共几条 共几页 当前是第几条等等.这个属性的其他用法暂时先不用管.

回过头来我们说说那个 "columns : colsConfig ".
columns 属性用来定义列表中各个列的信息. 本例中 columns 一个简单的定义如下
(我们假设这些数据是学生的信息,所以我们用"学号")

var colsConfig = [
		{ id : 'no'     ,header : "学号" , fieldName : 'no'　   },
		{ id : 'name'   ,header : "姓名" , fieldName : 'name'   },
		{ id : 'age'    ,header : "年龄" , fieldName : 'age'    },
		{ id : 'gender' ,header : "性别" , fieldName : 'gender' },
		{ id : 'english' , header : "英语"  , fieldName : 'english'  },
		{ id : 'math'    , header : "数学"  , fieldName : 'math' }
];

id : 列的唯一标识, 必须保证列表内唯一,建议整个页面唯一.
header : 列表的表头显示的文字信息.
fieldName : 列表的该列对应的 dataset中的列(字段).

如果 fieldName 和 id一致那么可以省略fieldName设置. 所以上诉的配置简化后为.

var colsConfig = [
		{ id : 'no'      , header : "学号" },
		{ id : 'name'    , header : "姓名" },
		{ id : 'age'     , header : "年龄" },
		{ id : 'gender'  , header : "性别" },
		{ id : 'english' , header : "英语" },
		{ id : 'math'    , header : "数学" }
];

( 关于grid和columns的更多属性设置请参考"GT-Grid高级教程".本教程不会涉及.)

好了,到此 GT-Grid列表组件的三大部分就介绍完了. 在介绍的同时, 实际上我已经写出了第一个示例的代码.

不过有了上面的代码还不够. 因为上面的代码相当于只是"定义除了这个列表组件.
并没有真正的在页面中创建这个列表.
要想创建列表需要执行下面的语句.

GT.Utils.onLoad( GT.Grid.render(mygrid) );   //mygrid为之前创建的对象,此处也可以传入grid的id.

("这条语句到底时做什么的?是否还有其他方式到达同样目的?" 本教程不会讲解)

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

现在大家把上面的代码整理一下, 按照下列顺序, 加到 mydemo1.html 里, 运行一下吧.

var data1 ...
var dsConfig ....
var colsConfig ...
var gridConfig ....
var mygrid=new GT.Grid( gridConfig );
GT.Utils.onLoad( GT.Grid.render(mygrid) );

如果一切顺利 , 你应该可以见到一个纯客户端只读列表. 它具有的功能很简单 :　
固定表头
可调整列宽
单击列表头排序
可调整列的相对位置(按ctrl不放,拖动列表头)

下一章我将告诉大家如何对列的扩展和显示效果的自定义.

=========================================
最后的成果图:

分享到：

GT-Grid 1.0 基础教程(二) | [音乐分享]让我如何不《知足》

2008-07-12 17:26
浏览 22114
评论(35)
论坛回复 / 浏览 (34 / 13130)
查看更多

35 楼 joker_T_ 2009-03-26

非常感谢fins,在现在网络文章千篇一律的情况下,只有在JAVAEYE才能找到这样好的文章.看来以后我要多关注这里了.
我接触GT GRID不到一周的时间,上次在同事那看到一个这样的例子,非常惊叹能做出这种出色的效果,也希望自己能做出这样的网站来.今天也终于算是入门了.

34 楼 fins 2009-02-12

grid.render()

33 楼 itlieying 2009-02-12

请教fins,GT.Utils.onLoad( GT.Grid.render(mygrid) );这个语句是随着页面的启动调用的，那么在GT里有没有随着某个按钮事件发生，比如说点击按钮然后调用GT的方法，不知道有没有这样的方法？

32 楼 fins 2009-01-19

晕帖子里写了下载地址啊

http://fins.iteye.com/blog/316548

31 楼 flybird1985 2009-01-19

gt_grid_all.js和gt_msg_cn.js两个文件在哪里啊，找了半天都没有找到，大侠可以发给我吗？346674058@163.com，谢谢！

30 楼 flybird1985 2009-01-19

gt_msg_cn.js和gt_grid_all.js在哪里搞的到啊，我找了半天都没有找到！
麻烦大侠可以发给我吗？346674058@163.com,谢谢！

29 楼 quningstudy 2008-10-29

你好，我想问下具体的演示怎么样啊？我是新用这个，但是运行不起来啊？用的是EClipse+jboss环境啊。请教高手哦！谢谢各位大师la!

28 楼 quningstudy 2008-10-29

很好，我要学习

27 楼 fins 2008-10-22

我觉得也许你对整个 columnConfig 的理解有问题啊

你要变的到底是字段对应的数据
还是字段名?

我觉得你指的应该是数据

而不是列表的表头或者是字段的名字
如果我说的对那么column 的 renderer 就是做这个的

你没看我的教程和示例吗??

----------------------

数据的某一列叫 age 那么"age"为字段名
某条记录的age那列的值是 22 那么"22"为对字段值
在表格里显示是表头信息要显示 "年龄" , 那么"年龄"为header

26 楼 leileiwang 2008-10-22

fins 写道

你是说要增加一列还是在原有列中增加一种数据值? 也就是说是下面哪种列表? 1 张三  20 , 40 ,100 , 满分李四  30 , 24 ,80 , ... ... 2 张三  20 , 40 , 满分李四  30 , 24 ,80 , ... ...

是你上面的第二种，
（2）
张三 20 , 40 , 满分
李四 30 , 24 ,80 ,

即：字段名不会额外增加，而是字段名随着它对应的值的变化而变化，如：张三 20 , 40 , 满分，作为表的4个字段,var colsConfig = [
        { id : 'name'    , header : "姓名" },
        { id : 'age'     , header : "20" },
        { id : 'weight' , header : "40" },
        { id : 'score' , header : "满分" },
];
当“满分”字段对应的数据为50时，字段名此时就自动变为“不及格”，不知这样的动态表格能不能实现啊？谢谢！！！

25 楼 fins 2008-10-21

你是说要增加一列

还是在原有列中增加一种数据值?

也就是说是下面哪种列表?

1

张三 20 , 40 ,100 , 满分
李四 30 , 24 ,80 ,
... ...

2

张三 20 , 40 , 满分
李四 30 , 24 ,80 ,
... ...

24 楼 leileiwang 2008-10-21

小胖哥，你好，我想向你请教下。对于报表（列表）的字段：比如
var colsConfig = [
        { id : 'no'      , header : "学号" },
        { id : 'name'    , header : "姓名" },
        { id : 'age'     , header : "年龄" },
        { id : 'gender' , header : "性别" },
        { id : 'english' , header : "英语" },
        { id : 'math'    , header : "数学" }
];
我现在想让上面的字段名，根据从数据库库查出的值来动态变化，（比如查数据库里查到100这个值时，表的字段名就自动增加一个“满分”的字段名），不知该如何动态实现？，可以实现吗？小弟刚接触GT_GRID，问题比较迂腐，谢谢！！！

23 楼 fins 2008-10-15

sebatinsky :

谢谢你的关注希望以后有问题可以更多的交流

另外我没删除过你的评论呀 :'(

22 楼 sebatinsky 2008-10-15

谢谢fins,说实话,说过上面的,我觉得很后悔,感觉自己还不是一个好的程序员,现在脸都红了,我还经常告诫自己,凡事要先研究,不管从某一个细节,但是做到的差距好大,也许我还算是一个新人,呵呵,(自我安慰一下),不过还是应该让自己能够问一些比较好的问题,所以,上面的感觉自己都好丢人了,后来自己稍微认真的看了一下文件的结构,总算可以了,可是没有发现你的回答,呵呵,糟糕,不管怎么样,这个也算是自己所学习ext之后的第一个列表组建了,想好好的和其他人一样,有更深的体会,当然,希望能发现问题,哈哈....

21 楼 sebatinsky 2008-10-15

还是我自己看你的文档研究吧,呵呵,自己学会的才是好的,谢谢了

20 楼 sebatinsky 2008-10-15

怎么评论被删除了?哈哈,用js的onerror
发现了,GT is not found
还有,error loading script
不知道怎么回事了,....解决了很久,没有办法来问

19 楼 fins 2008-10-15

可运行示例下载包里就有啊

_doc里有从简单到复杂的例子

18 楼 sebatinsky 2008-10-15

{

data : [

[ "010-0","大城小胖","1982-06-13",1,56,68,82,93 ],
[ "010-1","李茜","1990-06-14",1,75.5,81.5,60,79 ],
[ "010-2","金昏","1984-03-24",1,74.5,80.5,29.5,72.5 ],
[ "010-3","宋让帝","1995-12-28",1,40,69.5,98.5,99.5 ],
[ "010-4","郑绿","1995-04-07",2,36.5,83,80.5,78 ],
[ "010-5","蒋骆","1989-11-22",0,30,67,88.5,43 ],
[ "010-6","赵奸","1983-06-30",0,40.5,34,60.5,48.5 ],
[ "010-7","宋罚南","1985-07-28",0,62.5,73.5,32,47 ],
[ "010-8","金挖","1985-03-04",2,78.5,53.5,40.5,50.5 ],
[ "010-9","魏映","1981-05-06",0,43.5,72.5,28,39 ],
[ "010-10","卫管肚","1995-11-02",2,63,43.5,66,98 ],
[ "010-11","冯似","1993-06-06",2,66,54,32,72 ],
[ "010-12","曹教","1981-06-30",1,36.5,42,71,74 ],
[ "010-13","秦辈信","1990-09-23",0,34.5,55,59.5,64.5 ],
[ "010-14","宋念交","1987-06-09",0,38,48,68,64 ],
[ "010-15","褚空","1991-10-16",0,31.5,31,60,93.5 ],
[ "010-16","金竟","1994-07-05",1,43.5,69,91.5,82.5 ],
[ "010-17","蒋给累","1983-08-11",1,83,61,40.5,85 ],
[ "010-18","吴嗜甘","1984-10-11",1,48.5,79,54,93.5 ],
[ "010-19","王范","1983-07-23",0,36,38.5,91,94.5 ]

],
pageInfo : [ totalRowNum : 20 ],/////这里

exception: ['']/////这里

}////还有这里

不知道是什么原因,哎,,,,,,,,

17 楼 sebatinsky 2008-10-15

有谁能发个能运行的demo?我研究了块两个小时,都运行不出来,郁闷得很,本来想用它做一个项目,看来要换了,真郁闷

16 楼 gdufo 2008-09-04

太佩服小胖了，做了一个这么好的Grid

祝您的梦想成功!

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论