- 浏览: 786271 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (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开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第二章: 让"纯客户端只读列表"变得更强大一些吧
让我们继续来完善和加强上一章中做出的那个列表吧.
在开始之前,为了保留我们之前的成果,不至于学习的过程中把前一个成果弄坏, 我们将"mydemo1.html"另存为"mydemo2.html".
OK,开始.
=========================================
1 扩展数据列
示例中的数据(学生的信息) , 由6列构成 : 学号 , 姓名 , 年龄 , 性别, 英语成绩, 数学成绩.
这是我们能拿到的原始信息.
但是有时候,我们往往需要在页面中扩展出新的信息, 这些信息并不在原始信息内.
例如 我希望列表中包含 "总成绩"一列. 这时候,"总成绩"对应的数据就必须在页面内生成.
我们将这种并不存在于原始数据中,但是希望扩充到原始数据中的列叫做"扩展数据列".
在GT-Grid中, 利用数据集列 (dataset的field) 的initValue方法就可以实现.
按下面的方式修改代码.
initValue 属性指向一个函数, 该函数的返回值, 就为record的该列数据.
上例中, 会创建一个叫total的"扩展列" , 它会使每一条record的 total 属性值为 1.即 :
record['total']=1;
然后,我们就可以在 columns的定义中加入一个column,让其显示 total列 (此时total就和普通的数据列是一样的).
运行看一下效果, 你会发现,列表变成了7列, 所有记录的第7列"总成绩"值都为1.
为1 肯定不是我们想要的结果, 我们需要的是 计算 英语成绩与数学成绩的总和.
我们来改造一下 initValue 函数. initValue 函数的第一个参数为"对数据集进行迭代时的,当前record".
那么我们只要从record中取出 english 和 math成绩 相加即可.
另外, 现在列多了, 看起来不方便, 我们可以通过调整列宽来 美化外观. 通过给各个column设置"width"属性来实现.
目前版本的 GT-Grid的列宽只支持整数(单位:像素) 不支持百分比.
我们将7列的宽度 依次调整为 : 50 , 100 ,50, 50 ,60 ,60 ,70 .
这时候也许大家会发现, 分数相关的列都是内容左对齐, 这个似乎不符合国际关联, 通常数字都是右对齐的.
那么我们也改一下吧. 很简单, 通过给column设置"align"属性来实现.
align : 水平方向上 内容的对齐方式, 可选值: left(默认) center right.
运行一下看看结果吧 .
=========================================
2 扩展显示列
除了前面提到的"扩展数据列" ,还有一种扩展列, 它和"数据"本身关系不大,他更主要的作用是用来显示一些数据以外的东西.
举个例子. 我们肯定常常简单这样的列表:
前面使一些数据,最后一个单元格里有一个按钮或者是图片 或者是链接, 点击后可以执行一些特殊的操作.
那么这时候, 这最后一列就不能叫做 扩展数据列了, 它更多的职责时"显示", 它通常不会参与到 排序 统计 运算 等数据操作中.
这样的扩展列, 我们叫做"扩展显示列".
在GT-Grid中, 利用column 的 renderer 方法就可以实现.
对示例中的 column定义做如下修改 :
我们加入了一列"详细信息".
column.renderer 函数的返回值 是一个合法的html字符串. 这个返回值将显示在表格的相应单元格内.
renderer 函数的 6个参数依次为
此例中,暂时我们只需要一个record就可以了. 我们根据record信息,拼装出了一个链接.(当然在这个演示中链接的地址是无效的)
再次运行吧.
=========================================
其实 很多 扩展数据列的功能 ,通过扩展显示列 也可以实现.
例如关于 total 列的 , 我们也可以只在columns中扩展显示列, 直接使用:
renderer : function(...) { return 数学+英语 ; }
那么该如何选择呢?? 一个简单的原则如下:
如果你扩展的列 只是用来显示给用户看 , 而不会参与到 编辑 排序 统计 运算 等数据操作中,
那么使用扩展显示列就可以, 否则就应该使用扩展数据列.
(GT-Grid 考虑的真是周全啊 哈哈哈)
=========================================
3 个性化渲染列
之前的例子中, 所有数据在显示的时候都是"中规中矩". 这样有时候是无法满足我们的需求的 , 有时候我们也许希望列表显示的更加丰富一些.
例如: 在成绩一列, 我们希望总成绩大于170分的 用红颜色标识出来(因为这是一个很不错的成绩), 而120分以下的用蓝色标识出来(成绩很差).
这个需求怎么实现呢? 我想从上面加连接的例子 里大家应该能够悟出来 ,是的 没错, 继续使用 renderer .
大家直接看代码, 应该很容易就明白怎样做 以及为什么这样做.
对本小节做个简单概括: 我们利用renderer返回html的特性, 利用html代码对原始数据进行包装,便可以实现显示效果的自定(个性化渲染列).
=========================================
4 数据值 与 显示值的映射
本例中, 大家看到了, 性别一列一值 显示的时M/F, 这并不是我们希望看到的.
有了前两节的基础, 我想大家都可以 利用 renderer 方法轻易的实现 将M/F变成男/女.
在这小节我要告诉大家的是, 这种简单的映射, GT-Grid提供了一个工具函数, 可以帮助大家更简单的完成这个工作.
GT.Grid.mappingRenderer函数有两个参数:
第一个是用来做映射的json-object, 第二个是数据不满足映射关系时 希望返回的值.
用来做映射的json-object就相当于一个可 key-value的hashmap, key就是列对应的数据的值, value就是希望映射成的值.
这个还是很好理解的.
当数据的值不在 这个关于性别的 映射关系中时, 将返回 '未知'.
=========================================
这一章讲解了 对列的扩展和显示效果的自定义, 只要你合理的利用 initValue 以及 renderer ,绝对可以创造出丰富多彩的列表.
好了 ,第二章到此结束了. 已经很晚了, 明天再写吧. 下一章再见.
=========================================
最后的成果图:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第二章: 让"纯客户端只读列表"变得更强大一些吧
让我们继续来完善和加强上一章中做出的那个列表吧.
在开始之前,为了保留我们之前的成果,不至于学习的过程中把前一个成果弄坏, 我们将"mydemo1.html"另存为"mydemo2.html".
OK,开始.
=========================================
1 扩展数据列
示例中的数据(学生的信息) , 由6列构成 : 学号 , 姓名 , 年龄 , 性别, 英语成绩, 数学成绩.
这是我们能拿到的原始信息.
但是有时候,我们往往需要在页面中扩展出新的信息, 这些信息并不在原始信息内.
例如 我希望列表中包含 "总成绩"一列. 这时候,"总成绩"对应的数据就必须在页面内生成.
我们将这种并不存在于原始数据中,但是希望扩充到原始数据中的列叫做"扩展数据列".
在GT-Grid中, 利用数据集列 (dataset的field) 的initValue方法就可以实现.
按下面的方式修改代码.
var dsConfig= { data : data1 , fields :[ /* ...其他field略 ... */ {name : 'total' , type: 'float', initValue : function(record){ return 1; } } ] };
initValue 属性指向一个函数, 该函数的返回值, 就为record的该列数据.
上例中, 会创建一个叫total的"扩展列" , 它会使每一条record的 total 属性值为 1.即 :
record['total']=1;
然后,我们就可以在 columns的定义中加入一个column,让其显示 total列 (此时total就和普通的数据列是一样的).
var colsConfig = [ /* ...其他column略 ... */ { id : 'total' , header : "总成绩" } ];
运行看一下效果, 你会发现,列表变成了7列, 所有记录的第7列"总成绩"值都为1.
为1 肯定不是我们想要的结果, 我们需要的是 计算 英语成绩与数学成绩的总和.
我们来改造一下 initValue 函数. initValue 函数的第一个参数为"对数据集进行迭代时的,当前record".
那么我们只要从record中取出 english 和 math成绩 相加即可.
{ name : 'total' , type: 'float', initValue : function(record){ return record['english'] + record['math']; } }
另外, 现在列多了, 看起来不方便, 我们可以通过调整列宽来 美化外观. 通过给各个column设置"width"属性来实现.
目前版本的 GT-Grid的列宽只支持整数(单位:像素) 不支持百分比.
我们将7列的宽度 依次调整为 : 50 , 100 ,50, 50 ,60 ,60 ,70 .
这时候也许大家会发现, 分数相关的列都是内容左对齐, 这个似乎不符合国际关联, 通常数字都是右对齐的.
那么我们也改一下吧. 很简单, 通过给column设置"align"属性来实现.
align : 水平方向上 内容的对齐方式, 可选值: left(默认) center right.
var colsConfig = [ /* ...其他column略 ... */ { id : 'english' , header : "英语" , width : 60 , align :'right'} ]
运行一下看看结果吧 .
=========================================
2 扩展显示列
除了前面提到的"扩展数据列" ,还有一种扩展列, 它和"数据"本身关系不大,他更主要的作用是用来显示一些数据以外的东西.
举个例子. 我们肯定常常简单这样的列表:
前面使一些数据,最后一个单元格里有一个按钮或者是图片 或者是链接, 点击后可以执行一些特殊的操作.
那么这时候, 这最后一列就不能叫做 扩展数据列了, 它更多的职责时"显示", 它通常不会参与到 排序 统计 运算 等数据操作中.
这样的扩展列, 我们叫做"扩展显示列".
在GT-Grid中, 利用column 的 renderer 方法就可以实现.
对示例中的 column定义做如下修改 :
var colsConfig = [ /* ...其他column略 ... */ { id : 'detail' , header : "详细信息" , width : 120, renderer : function(value ,record,columnObj,grid,colNo,rowNo){ return '<a href=".?no='+record['no']+'" >'+ record['name'] +' 的详细信息</a>'; } } ];
我们加入了一列"详细信息".
column.renderer 函数的返回值 是一个合法的html字符串. 这个返回值将显示在表格的相应单元格内.
renderer 函数的 6个参数依次为
value : 相应单元格对应的数据值 (本例中为null, 因为数据集中 根本就没有detail列) record : 迭代中当前的record columnObj : 当前的column对象, grid : 当前的grid对象. colNo : 当前的列号 rowNo : 迭代中当前的行号
此例中,暂时我们只需要一个record就可以了. 我们根据record信息,拼装出了一个链接.(当然在这个演示中链接的地址是无效的)
再次运行吧.
=========================================
其实 很多 扩展数据列的功能 ,通过扩展显示列 也可以实现.
例如关于 total 列的 , 我们也可以只在columns中扩展显示列, 直接使用:
renderer : function(...) { return 数学+英语 ; }
那么该如何选择呢?? 一个简单的原则如下:
如果你扩展的列 只是用来显示给用户看 , 而不会参与到 编辑 排序 统计 运算 等数据操作中,
那么使用扩展显示列就可以, 否则就应该使用扩展数据列.
(GT-Grid 考虑的真是周全啊 哈哈哈)
=========================================
3 个性化渲染列
之前的例子中, 所有数据在显示的时候都是"中规中矩". 这样有时候是无法满足我们的需求的 , 有时候我们也许希望列表显示的更加丰富一些.
例如: 在成绩一列, 我们希望总成绩大于170分的 用红颜色标识出来(因为这是一个很不错的成绩), 而120分以下的用蓝色标识出来(成绩很差).
这个需求怎么实现呢? 我想从上面加连接的例子 里大家应该能够悟出来 ,是的 没错, 继续使用 renderer .
大家直接看代码, 应该很容易就明白怎样做 以及为什么这样做.
var colsConfig = [ /* ...其他column略 ... */ { id : 'total' , header : "总成绩" , width : 70 , align :'right', renderer : function(value ,record,columnObj,grid,colNo,rowNo){ var total = record['total']; if (total>170) { total = '<span style="color:red" >'+ total +'</span>'; }else if (total<120) { total = '<span style="color:blue" >'+ total +'</span>'; } return total; } } ];
对本小节做个简单概括: 我们利用renderer返回html的特性, 利用html代码对原始数据进行包装,便可以实现显示效果的自定(个性化渲染列).
=========================================
4 数据值 与 显示值的映射
本例中, 大家看到了, 性别一列一值 显示的时M/F, 这并不是我们希望看到的.
有了前两节的基础, 我想大家都可以 利用 renderer 方法轻易的实现 将M/F变成男/女.
在这小节我要告诉大家的是, 这种简单的映射, GT-Grid提供了一个工具函数, 可以帮助大家更简单的完成这个工作.
var colsConfig = [ /* ...其他column略 ... */ { id : 'gender' , header : "性别" , width : 50 , renderer : GT.Grid.mappingRenderer( {'U': '未知' , 'M':'男', 'F':'女'} , '未知' ) } ];
GT.Grid.mappingRenderer函数有两个参数:
第一个是用来做映射的json-object, 第二个是数据不满足映射关系时 希望返回的值.
用来做映射的json-object就相当于一个可 key-value的hashmap, key就是列对应的数据的值, value就是希望映射成的值.
这个还是很好理解的.
当数据的值不在 这个关于性别的 映射关系中时, 将返回 '未知'.
=========================================
这一章讲解了 对列的扩展和显示效果的自定义, 只要你合理的利用 initValue 以及 renderer ,绝对可以创造出丰富多彩的列表.
好了 ,第二章到此结束了. 已经很晚了, 明天再写吧. 下一章再见.
=========================================
最后的成果图:
发表评论
-
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 1802GT-Grid 1.12版 说明文档. 这篇文档主要说明一些 ... -
GT-Grid 1.0 基础教程(十三)
2009-12-23 16:14 989教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(十二)
2009-12-23 16:13 957教程说明: 这是一个告诉大家如何快速的利用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 875教程说明: 这是一个告诉大家如何快速的利用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:12 950GT-Grid 1.0 基础教程(一) 教程说明: 这是一个 ...
相关推荐
本基础教程旨在帮助初学者快速理解并掌握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 源码解析与后台交互实践》 GT-Grid 是一款功能强大的数据网格组件,广泛应用于Web应用中展示和管理大量结构化数据。本次我们将通过"gt_grid_demo"源码下载来深入理解GT-Grid的运作机制及其与后台数据交互...
"gt-grid 表格源码,开发包,api手册"这一资源主要涵盖了用于构建数据表格的前端组件的源代码、开发工具以及相关的API文档。gt-grid是一个强大的数据展示和操作框架,它允许开发者以灵活的方式展示和管理大量结构化...
在例子中,我们可以看到三种不同场景的应用,这些例子可能展示了GT-Grid和EXT-Grid在处理基础数据展示、高级功能集成以及自定义程度上的差异。例如,可能有一个例子专门对比两者的数据加载速度,另一个可能比较各自...
GT-Grid 是一款强大的数据网格组件,常用于前端开发中展示和操作大量结构化数据。在Web应用中,它提供了一种高效的方式来呈现表格数据,支持排序、筛选、分页、编辑等多种功能,大大提升了用户体验。这个压缩包文件...
GT-Grid 是一个基于Ajax技术的列表组件. 拥有丰富的功能以及良好易用性和用户体验. 它是 EC Side列表组件 的更新换代产品. (ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jsp...
"gt-grid.rar+demo"这个压缩包文件包含的是关于"gt-grid"的样例源码。"gt-grid"是一个常见的前端数据展示控件,通常用于创建高性能、可定制的表格,它在Web应用中广泛使用,特别是在大数据量的场景下。下面我们将...
10. **文档与示例**:为了方便开发者快速上手,GT-grid提供了详尽的文档和丰富的示例代码,从基础用法到高级功能,都有清晰的指导。 在最新的版本中,GT-grid不仅在功能上进行了增强,而且在用户体验和性能优化上也...
在本示例中,“gt-grid 分页 用ajax 开发的 里面有例子”显然演示了如何使用`gt-grid`配合Ajax实现分页功能。 首先,我们需要理解Ajax的核心概念。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的...
网页Grid组件,特别是GT-Grid组件,是Web开发中一种强大的数据展示工具,它为开发者提供了灵活、高效且功能丰富的表格解决方案。Grid组件在网页应用中扮演着至关重要的角色,用于展示结构化数据,支持排序、筛选、...
GT-GRID是一款基于jQuery的强大的数据网格插件,主要用于展示和操作大量结构化的数据。它在Web应用中常被用于创建功能丰富的表格,提供类似数据库的分页、排序、过滤和编辑功能,使得用户可以方便地浏览和管理数据。...
标题中的“Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_”提到了几个关键元素,分别是“Draw-Grid”,“CATIA 插件”,“catia车线”以及“下载”。这表明我们要讨论的是一个用于CATIA软件的...
NULL 博文链接:https://fins.iteye.com/blog/283672
二、Ag-Grid核心概念 1. **列定义(Column Definitions)**:定义了表格中每一列的属性,如字段名、宽度、是否可排序等。 2. **数据模型(Data Model)**:存储表格数据的地方,可以是简单的JavaScript数组,也可以...
列表组件N0.1(国产) 用过之后你才知道优化 初学者提供问题解答哈 qq 406235245