- 浏览: 786283 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (573)
- Java基础 (76)
- C++基础 (5)
- hibernate (5)
- struts (4)
- spring (1)
- webservice (7)
- AjaX基础 (0)
- JS脚本 (53)
- 正则表达式 (5)
- html脚本 (30)
- 数据库基础 (54)
- 工作相关 (49)
- 其他 (30)
- Linux (9)
- web服务器 (17)
- JSP (13)
- eclipse (6)
- 面试题相关 (20)
- XML (3)
- Apache common (2)
- 生活 (35)
- VMware (1)
- log4j (9)
- BeanUtils (2)
- 设计模式 (3)
- UML (1)
- UNIX (1)
- ibats (5)
- GT-Grid (17)
- ABAP学习 (17)
- ABAP (35)
- ABAP--ALV (11)
- ABAP--WEBDIMPRO (0)
- abap-sample (1)
- BEMS (2)
- flex (33)
- GIS技术 (3)
最新评论
GT-Grid 1.0 基础教程(一)
教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第一章: 从"纯客户端只读列表"开始
本章将演示如何开发出一个 纯客户端只读列表(数据已经在客户端存在,列表只是用来显示这些数据,没有CRUD功能).
同时演示了如何使用设置一些属性,来达到个性化的需求.
虽然本章教程的内容未必能够满足你的需求, 但是它却是GT-Grid使用的基础,
在你完全掌握该章的内容之前, 我并不建议你去接触后面的章节.
另外可能有一部分朋友会觉得,这个教程写的太啰嗦了 有些地方太基础了.
没错 我就是要啰嗦点 基础点.
因为我假想的对象是 从来没接触过任何基于ajax技术的列表组件的人(但是有一定的js基础,而且知道json是啥).
开始教程前, 请先建立一个"练习文件", 可以起名叫"mydemo1.html", 内容如下 : (建议编码为UTF-8,具体引入的文件路径请根据情况自己修改)
好了 让我开始 GT-Grid的启航之旅吧.
=========================================
一个完整GT-Grid 由3部分组成:
1 数据.
数据必须为一个json数组, 数组中的每一项为一个 js对象/js数组.例如下面两种形式的数据都是可以的.(但是不能混合使用).
数组中的每一项 代表 单条数据. 以下简称 record.
假设有这样一组数据 (学生信息)
我更推荐使用第一种,虽然也许有人认为数组应该"速度更快,占用的内存更少,传输时占用的贷款更少....",
但是这样的优势在实际使用中并不明显. 而且当和后台数据结合起来之后, 你会发现,
绝大多数 json的第三方转换工具 都会将pojo map等转换成第一种形式的json数据.
而且也更便于反向转换.
当然 对于第2钟GT-Grid也是支持的, 稍后我会讲解. 目前本例以及我以后所写的其他教程 ,都将以第一种形式的数据作为示例.
=========================================
2 数据集(dataset)
有了数据还不够, 因为GT-Grid未必就能理解这些数据, 你还需要对数据进行简单的描述.这个描述就是定义数据集.
前面提到的 data1 对应的数据集 完整定义如下:
data 指向 之前的数据.
fields 是一个数组, 描述record各个字段的信息,类似数据库表中的列信息.
当 type 为 string 时, 可省略type设置.
当 index 和 name 一致时, 可省略 index设置.
所以 一个简化后的定义为:
如果你的record时数组,而不是json-object (就是前面提到的 data2 ),
那么 index 就应该为 0 ,1 ,2 ....等等, 用来表示该列对应record中的第几条数据.
=========================================
3 GT-Grid组件.
第三部分就是定义并创建GT-Grid对象.创建GT-Grid对象的方法如下:
我个人比较习惯将 new GT.Grid的大段的参数单独声明. 一个简单的例子如下:
回过头来我们说说那个 "columns : colsConfig ".
columns 属性用来定义列表中各个列的信息. 本例中 columns 一个简单的定义如下
(我们假设这些数据是学生的信息,所以我们用"学号")
如果 fieldName 和 id一致 那么可以省略fieldName设置. 所以 上诉的配置简化后为.
( 关于grid和columns的更多属性设置请参考"GT-Grid高级教程".本教程不会涉及.)
好了,到此 GT-Grid列表组件的三大部分就介绍完了. 在介绍的同时, 实际上我已经写出了第一个示例的代码.
不过有了上面的代码还不够. 因为上面的代码相当于只是"定义除了这个 列表组件.
并没有真正的在页面中创建这个列表.
要想创建列表需要执行下面的语句.
("这条语句到底时做什么的?是否还有其他方式到达同样目的?" 本教程不会讲解)
=========================================
现在 大家把上面的代码 整理一下, 按照下列顺序, 加到 mydemo1.html 里, 运行一下吧.
如果一切顺利 , 你应该可以见到一个 纯客户端只读列表. 它具有的功能很简单 :
固定表头
可调整列宽
单击列表头排序
可调整列的相对位置(按ctrl不放,拖动列表头)
下一章 我将告诉大家如何 对列的扩展和显示效果的自定义.
=========================================
最后的成果图:
教程说明:
这是一个告诉大家如何快速的利用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( function(){ mygrid.render(); } ); //mygrid为之前创建的对象,此处也可以传入grid的id.
("这条语句到底时做什么的?是否还有其他方式到达同样目的?" 本教程不会讲解)
=========================================
现在 大家把上面的代码 整理一下, 按照下列顺序, 加到 mydemo1.html 里, 运行一下吧.
var data1 ... var dsConfig .... var colsConfig ... var gridConfig .... var mygrid=new GT.Grid( gridConfig ); GT.Utils.onLoad( function(){ mygrid.render(); } );
如果一切顺利 , 你应该可以见到一个 纯客户端只读列表. 它具有的功能很简单 :
固定表头
可调整列宽
单击列表头排序
可调整列的相对位置(按ctrl不放,拖动列表头)
下一章 我将告诉大家如何 对列的扩展和显示效果的自定义.
=========================================
最后的成果图:
发表评论
-
ABAP中增减字段前导零函数
2010-04-13 17:23 2972CONVERSION_EXIT_ALPHA_INPUT 功能 ... -
GT-Grid 1.18版 说明文档.
2009-12-23 16:17 966GT-Grid 1.18版 说明文档. ... -
GT-Grid 1.15版 说明文档.
2009-12-23 16:16 1146这篇文档主要说明一些这个版本的变化(新增功能 新特性) = ... -
GT-Grid 1.12版 说明文档.
2009-12-23 16:15 1803GT-Grid 1.12版 说明文档. 这篇文档主要说明一些 ... -
GT-Grid 1.0 基础教程(十三)
2009-12-23 16:14 989教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(十二)
2009-12-23 16:13 958教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(十一)
2009-12-23 16:12 1034教程说明: 这是一个告 ... -
GT-Grid 1.0 基础教程(十)
2009-12-23 16:09 1237GT-Grid 1.0 基础教程(十) ... -
GT-Grid 1.0 基础教程(九)
2009-12-23 16:08 1072教程说明: 这是一个告 ... -
GT-Grid 1.0 基础教程(八)
2009-12-23 16:07 1055教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(七)
2009-12-23 16:03 876教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(六)
2009-12-23 15:57 990教程说明: 这是一个告 ... -
GT-Grid 1.0 基础教程(五)
2009-12-23 15:54 877教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(四)
2009-12-23 15:48 849教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(三)
2009-12-23 15:29 821教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(二)
2009-12-23 14:15 961教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ...
相关推荐
本基础教程旨在帮助初学者快速理解并掌握GT-Grid 1.0 的核心概念和基本操作,以便在实际项目中应用。下面将详细阐述GT-Grid 1.0 的关键知识点。 一、GT-Grid 1.0 概述 GT-Grid 1.0 是一个基于Java开发的分布式计算...
### GT-Grid 1.0 基础教程(一)——纯客户端只读列表开发详解 #### 一、教程背景与目标 本教程旨在帮助初学者快速掌握如何使用GT-Grid开发纯客户端只读列表的基本技能。对于那些对Ajax技术下的列表组件不太熟悉的...
在这个“gt-grid的一个例子”中,我们将深入探讨如何使用`gt-grid`的基本功能,并通过实际代码示例来理解其工作原理。 首先,`gt-grid` 提供了灵活的数据绑定机制,可以方便地将后台数据源与前端表格进行对接。在...
以上只是`gt-grid`基础教程的一部分,更多高级功能如编辑、合并单元格、树形结构等,可以根据实际需求查阅官方文档进一步学习。理解并熟练掌握`gt-grid`,将有助于你更高效地构建数据展示界面,提升用户体验。
GT-Grid 教程示例 GT-Grid 教程示例GT-Grid 教程示例GT-Grid 教程示例
GT-Grid 是一款功能强大的数据网格组件,广泛应用于Web应用中展示和管理大量结构化数据。本次我们将通过"gt_grid_demo"源码下载来深入理解GT-Grid的运作机制及其与后台数据交互的方式。 一、GT-Grid 概述 GT-Grid ...
GT-Grid 是一个基于Ajax技术的列表组件. 拥有丰富的功能以及良好易用性和用户体验. 它是 EC Side列表组件 的更新换代产品. (ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jsp...
"gt-grid 表格源码,开发包,api手册"这一资源主要涵盖了用于构建数据表格的前端组件的源代码、开发工具以及相关的API文档。gt-grid是一个强大的数据展示和操作框架,它允许开发者以灵活的方式展示和管理大量结构化...
在例子中,我们可以看到三种不同场景的应用,这些例子可能展示了GT-Grid和EXT-Grid在处理基础数据展示、高级功能集成以及自定义程度上的差异。例如,可能有一个例子专门对比两者的数据加载速度,另一个可能比较各自...
GT-Grid 是一款强大的数据网格组件,常用于前端开发中展示和操作大量结构化数据。在Web应用中,它提供了一种高效的方式来呈现表格数据,支持排序、筛选、分页、编辑等多种功能,大大提升了用户体验。这个压缩包文件...
"gt-grid"是一个常见的前端数据展示控件,通常用于创建高性能、可定制的表格,它在Web应用中广泛使用,特别是在大数据量的场景下。下面我们将详细探讨gt-grid的相关知识点。 1. **什么是gt-grid** gt-grid是一个...
`gt-grid`是一个用于构建高效、响应式的数据网格的框架,它支持通过Ajax进行数据的异步加载,非常适合处理动态、大量的数据。在本示例中,“gt-grid 分页 用ajax 开发的 里面有例子”显然演示了如何使用`gt-grid`...
10. **文档与示例**:为了方便开发者快速上手,GT-grid提供了详尽的文档和丰富的示例代码,从基础用法到高级功能,都有清晰的指导。 在最新的版本中,GT-grid不仅在功能上进行了增强,而且在用户体验和性能优化上也...
网页Grid组件,特别是GT-Grid组件,是Web开发中一种强大的数据展示工具,它为开发者提供了灵活、高效且功能丰富的表格解决方案。Grid组件在网页应用中扮演着至关重要的角色,用于展示结构化数据,支持排序、筛选、...
GT-GRID是一款基于jQuery的强大的数据网格插件,主要用于展示和操作大量结构化的数据。它在Web应用中常被用于创建功能丰富的表格,提供类似数据库的分页、排序、过滤和编辑功能,使得用户可以方便地浏览和管理数据。...
这表明我们要讨论的是一个用于CATIA软件的特定插件——Draw-Grid,它主要功能是帮助用户在制图时放置车线(grid lines)。 首先,让我们来了解一下CATIA。CATIA,全称Computer-Aided Three-dimensional Interactive...
Ag-Grid是一款强大的数据网格组件,常用于JavaScript和TypeScript项目中,特别是在处理大量数据时,它提供了丰富的功能和优秀的性能。在这个"Ag-Grid Demo2.7z"压缩包中,你将找到一个示例项目,展示了如何在实际...
NULL 博文链接:https://fins.iteye.com/blog/283672
- **安装**:通常通过npm或yarn进行安装,例如`npm install ag-grid-community`。 - **初始化**:在项目中引入ag-Grid,并创建数据网格实例,设置数据源和列定义。 - **文档与示例**:ag-Grid提供详尽的官方文档和...