- 浏览: 2618058 次
- 性别:
- 来自: 小胖儿的大城
文章分类
最新评论
-
ni4wangba0:
ni4wangba0 写道亲测,算法有问题。对不起,其实是我自 ...
谈谈"求线段交点"的几种算法(js实现,完整版) -
ni4wangba0:
亲测,算法有问题。
谈谈"求线段交点"的几种算法(js实现,完整版) -
kers007:
苹果不让Webapp 在appstore 里发布,我不知道对 ...
苹果真的要在 AppStore 里封杀 WebApp 吗? -
striveandlive:
fins = js大牛
[原创]GT-Template, 一个超轻量级的js模板工具. -
AlwaysYang:
基础扎实的才能行走天下。
关于body的"大小"在ie和ff下的一些基础知识
GT-Grid 1.0 基础教程(六)
教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第六章: 可编辑列表 之 编辑器的使用
从这章开始,将为大家讲解"可编辑列表"的实现,预计关于"可编辑列表以及数据保存"的相关内容大概要用掉四至五章的篇幅.
闲话少说,让我们直入主题吧.
本章的示例将从 第三章的示例衍生而来, 我们将"mydemo3.html"另存为"mydemo6.html".
=========================================
让第三章中的列表变为可编辑列表很简单. 首先,我们拿英语和数学成绩 做例子.
在这个列表中, 我们希望学生的英语和数学成绩是可编辑的. 编辑这两列的要求很简单:
1 编辑时使用普通文本框.
2 只能是浮点数
3 是必填项.
我们首先修改 columns中 对这两列的定义, 将它们修改成下面的样子.
列定义中加入了 " editor: { type :'text' ,validRule : 'R,float' } ".
editor 即为该列所使用的编辑器 (默认情况下,指定editor后 该列为可编辑列,如果不指定editor 则为不可编辑列)
type 定义了 编辑器的类型为 text, 即"通文本框".
validRule 为校验规则, 其值为一个"用逗号分割关键字"的字符串,本示例中, R标示必填项,float标示是浮点数.
validRule属性还可以是数组,如 validRule : 'R,float' 完全等价于 validRule : [ 'R' ,'float'] ,合适必须要用数组?这个将在高级讲座中提及.
现在预览一下页面, 点击 英语 和 数学两列, 就可以进行编辑了, 结束编辑按回车或tab键(或点击编辑器之外的地方),取消编辑按ESC.
当结束编辑时,如果输入的值不符合校验规则时, 系统将给出提示,同时 会将值恢复到编辑前的状态.
编辑这两列中的某一列之后, 你会发现, 总成绩一项也随之改变了,这正是我们需要的效果 .
=========================================
下面 ,我们希望"性别"列也是可编辑的. 编辑这列的要求:
1 使用下拉框来编辑.
2 下拉框显示的内容为 : 未知, 男, 女, 这三项对应的值分比为 U M F.
修改列定义如下:
editor的 type 为 select,标示这是一个下拉框. options 定义了这个下拉框里的各个候选项的信息, 前面的是option的值,后面的是option的显示内容.
这里 renderer 和 editor 共同用到了 一个 json对象 {'U': '未知' , 'M':'男', 'F':'女'} , 在实际开发中,建议将这类字典数据单独统一存放,便于复用.
=========================================
前面讲到了 两类编辑器 : text , select , 编辑器的类型还可以是: date ,如 :
editor : { type :'date' ,validRule : 'date' }
还可以自行开发编辑器(本教程暂不讲解).
=========================================
另外关于校验规则, GT-Grid还支持的有:
integer(整数) email(电子邮件地址) money(金钱,最多两位小数的数字) enchar(英文字符串)
date(YYYY-MM-DD格式的日期) ,time(HH:mm:ss格式的时间) , datetime(YYYY-MM-DD HH:mm:ss格式的日期时间)
虽然GT-Grid内置的校验规则不多, 但是, 开发人员可以很轻松的自定义校验函数,从而实现更多样的校验功能.
虽然"自行开发编辑器"在本教程里不会提及,但是自定义校验函数这一功能还是很有必要在这里说明一下的.
其实 有了这个特性, 即使 所有的 编辑器 都使用 text形式, 也完全可以满足很多很复杂的个性化需求.
下面以编辑 数学 列为例. 假设编辑这列的要求:
1 输入的必须是 10到100之间(开区间)的整数
2 数学成绩 不能比 英语成绩 少30分以上
修改列定义如下:
我们通过给 editor 指定 validator 属性来实现自定义校验函数的功能.
validator 属性值为一函数, 参数有4个
value : 编辑器输入的值,也就是待校验的指
record : 编辑的当前记录
colObj : 编辑的列的列对象(记录了列信息)
grid : 当前的grid对象
通常我们只需要使用前两个属性.
函数的返回值有两种, 一种是true 标示校验通过.
另一种是一个非空字符串, 用来当作错误提示信息.
此时, 就无需再给editor指定校验规则了. 也就是说 vaildRule 和 validator 属性不能共存.
=========================================
除了自定义校验函数之外, 还有一个功能也是我们常见的, 就是"输入值的自动转换".
例如有时候我们会有这样的需求.
该列只允许输入 小数位数最多为1位的浮点数, 当编辑时 如果输入的值的小数位数超过了1位, 我们并不希望提示用户"输入错误"
而是希望自动截去多余的小数.
这个功能 GT.Grid也是支持的 (GT-Grid 真是强大啊 哈哈哈)
但是这个功能也暂时先不讲解.
关于 编辑器以及其他方面的一些更多 更高级的内容 本基础教程暂时都不会讲解.
原因如下 :
1 一些高级特性 我这里设计的可能还够好 未来还会有变动,在稳定前不打算告诉大家
2 高级内容未必实用,使用的人未必多, 我目前打算集中经历写出对大多数人有用的教程.
3 不适合放到此基础教程中(废话).
4 什么东西都在教程里讲清楚了,以后就没人提问题了, 那么圈子 群 就不热闹了 (嘿嘿嘿, 邪恶的笑)
=========================================
好了 这章就讲解到这里.下章将讲解 如何将编辑后的数据传递给服务端 并保存.
前一阵有朋友反应 第四章和第五章 说的不是很明白, 在这里我向大家道个歉.
等 与后台结合的示例 推出后 ,大家看例子 以及例子里的代码也许会更明白一些.
估计 第七章 也会和 第四 五章一样 稍微难懂一些 (因为又是与后台结合)
请大家见谅.
教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第六章: 可编辑列表 之 编辑器的使用
从这章开始,将为大家讲解"可编辑列表"的实现,预计关于"可编辑列表以及数据保存"的相关内容大概要用掉四至五章的篇幅.
闲话少说,让我们直入主题吧.
本章的示例将从 第三章的示例衍生而来, 我们将"mydemo3.html"另存为"mydemo6.html".
=========================================
让第三章中的列表变为可编辑列表很简单. 首先,我们拿英语和数学成绩 做例子.
在这个列表中, 我们希望学生的英语和数学成绩是可编辑的. 编辑这两列的要求很简单:
1 编辑时使用普通文本框.
2 只能是浮点数
3 是必填项.
我们首先修改 columns中 对这两列的定义, 将它们修改成下面的样子.
var colsConfig = [ /* 略去其他设置 */ { id : 'english' , header : "英语" , width : 60 , align :'right' , editor: { type :'text' ,validRule : 'R,float' } }, { id : 'math' , header : "数学" , width : 60 , align :'right' , editor: { type :'text' ,validRule : 'R,float' } }, ]
列定义中加入了 " editor: { type :'text' ,validRule : 'R,float' } ".
editor 即为该列所使用的编辑器 (默认情况下,指定editor后 该列为可编辑列,如果不指定editor 则为不可编辑列)
type 定义了 编辑器的类型为 text, 即"通文本框".
validRule 为校验规则, 其值为一个"用逗号分割关键字"的字符串,本示例中, R标示必填项,float标示是浮点数.
validRule属性还可以是数组,如 validRule : 'R,float' 完全等价于 validRule : [ 'R' ,'float'] ,合适必须要用数组?这个将在高级讲座中提及.
现在预览一下页面, 点击 英语 和 数学两列, 就可以进行编辑了, 结束编辑按回车或tab键(或点击编辑器之外的地方),取消编辑按ESC.
当结束编辑时,如果输入的值不符合校验规则时, 系统将给出提示,同时 会将值恢复到编辑前的状态.
编辑这两列中的某一列之后, 你会发现, 总成绩一项也随之改变了,这正是我们需要的效果 .
=========================================
下面 ,我们希望"性别"列也是可编辑的. 编辑这列的要求:
1 使用下拉框来编辑.
2 下拉框显示的内容为 : 未知, 男, 女, 这三项对应的值分比为 U M F.
修改列定义如下:
var colsConfig = [ /* 略去其他设置 */ { id : 'gender' , header : "性别" , width : 50 , editor : { type :'select' ,options : {'U': '未知' , 'M':'男', 'F':'女'} }, renderer : GT.Grid.mappingRenderer( {'U': '未知' , 'M':'男', 'F':'女'} , '未知' ) }, ]
editor的 type 为 select,标示这是一个下拉框. options 定义了这个下拉框里的各个候选项的信息, 前面的是option的值,后面的是option的显示内容.
这里 renderer 和 editor 共同用到了 一个 json对象 {'U': '未知' , 'M':'男', 'F':'女'} , 在实际开发中,建议将这类字典数据单独统一存放,便于复用.
=========================================
前面讲到了 两类编辑器 : text , select , 编辑器的类型还可以是: date ,如 :
editor : { type :'date' ,validRule : 'date' }
还可以自行开发编辑器(本教程暂不讲解).
=========================================
另外关于校验规则, GT-Grid还支持的有:
integer(整数) email(电子邮件地址) money(金钱,最多两位小数的数字) enchar(英文字符串)
date(YYYY-MM-DD格式的日期) ,time(HH:mm:ss格式的时间) , datetime(YYYY-MM-DD HH:mm:ss格式的日期时间)
虽然GT-Grid内置的校验规则不多, 但是, 开发人员可以很轻松的自定义校验函数,从而实现更多样的校验功能.
虽然"自行开发编辑器"在本教程里不会提及,但是自定义校验函数这一功能还是很有必要在这里说明一下的.
其实 有了这个特性, 即使 所有的 编辑器 都使用 text形式, 也完全可以满足很多很复杂的个性化需求.
下面以编辑 数学 列为例. 假设编辑这列的要求:
1 输入的必须是 10到100之间(开区间)的整数
2 数学成绩 不能比 英语成绩 少30分以上
修改列定义如下:
var colsConfig = [ /* 略去其他设置 */ { id : 'math' , header : "数学" , width : 60 , align :'right' , editor: { type :'text' , validator : function(value,record,colObj,grid){ // 将输入的数学成绩转换成数值形. value=Number(value); //取得英语成绩,并转换成数值形. var english = Number(record['english']); // 做校验 if ( !isNaN(value) && ( value>10 && value< 100 ) && ( english-value <= 30 ) ) { return true; } return " 数学成绩 必须满足下列条件:\n"+ " 1 输入的必须是 10到100之间(开区间)的整数.\n"+ " 2 数学成绩 不能比 英语成绩 少30分以上."; } } }, ]
我们通过给 editor 指定 validator 属性来实现自定义校验函数的功能.
validator 属性值为一函数, 参数有4个
value : 编辑器输入的值,也就是待校验的指
record : 编辑的当前记录
colObj : 编辑的列的列对象(记录了列信息)
grid : 当前的grid对象
通常我们只需要使用前两个属性.
函数的返回值有两种, 一种是true 标示校验通过.
另一种是一个非空字符串, 用来当作错误提示信息.
此时, 就无需再给editor指定校验规则了. 也就是说 vaildRule 和 validator 属性不能共存.
=========================================
除了自定义校验函数之外, 还有一个功能也是我们常见的, 就是"输入值的自动转换".
例如有时候我们会有这样的需求.
该列只允许输入 小数位数最多为1位的浮点数, 当编辑时 如果输入的值的小数位数超过了1位, 我们并不希望提示用户"输入错误"
而是希望自动截去多余的小数.
这个功能 GT.Grid也是支持的 (GT-Grid 真是强大啊 哈哈哈)
但是这个功能也暂时先不讲解.
关于 编辑器以及其他方面的一些更多 更高级的内容 本基础教程暂时都不会讲解.
原因如下 :
1 一些高级特性 我这里设计的可能还够好 未来还会有变动,在稳定前不打算告诉大家
2 高级内容未必实用,使用的人未必多, 我目前打算集中经历写出对大多数人有用的教程.
3 不适合放到此基础教程中(废话).
4 什么东西都在教程里讲清楚了,以后就没人提问题了, 那么圈子 群 就不热闹了 (嘿嘿嘿, 邪恶的笑)
=========================================
好了 这章就讲解到这里.下章将讲解 如何将编辑后的数据传递给服务端 并保存.
前一阵有朋友反应 第四章和第五章 说的不是很明白, 在这里我向大家道个歉.
等 与后台结合的示例 推出后 ,大家看例子 以及例子里的代码也许会更明白一些.
估计 第七章 也会和 第四 五章一样 稍微难懂一些 (因为又是与后台结合)
请大家见谅.
发表评论
-
那些成天说我的GT-Grid抄袭的人注意了
2009-03-19 22:01 10300你们能够在浩瀚的网络中找到 sigmawidgets htt ... -
[发布]GT-Grid 1.42 版 ★& "前后台结合示例"★2009-01-15更新
2009-01-15 02:41 27579=============================== ... -
[发布]GT-Grid 1.36 版 ★& "前后台结合示例"★2008-12-01 12AM 更新
2008-12-01 01:27 10484(最后更新时间 :12月1日 中午12点时, 修正了 1.36 ... -
GT-Grid 近期将会发布一个bug修正版本,然后将会进行较大的重构
2008-11-11 00:12 3892GT-Grid 近期将会发布一个bug修正版本, 主要修正上一 ... -
[发布]GT-Grid 1.25 版 ★& "前后台结合示例" ★2008-10-21 更新
2008-10-21 17:25 19856首先 先道个歉. 之前许诺过 10月20日之前发布,结果迟到了 ... -
对于复杂javabean到json串的转换,建议使用FlexJSON
2008-10-16 11:23 9932gt-grid自带的那个 javaBean与json的转换工具 ... -
[通知] GT-Grid 讨论群 变更
2008-10-10 15:54 3048GT-Grid的群建立至今, 用户早已满员, 每日还有很多申请 ... -
10月中旬支持导出excel和csv的gt-grid会推出
2008-10-04 21:19 270310月中旬支持导出excel和csv的gt-grid会推出 ( ... -
[发布]GT-Grid 1.18版 & "前后台结合示例"更新 ★2008-09-12发布
2008-09-12 16:40 12692这个版本带有 与java后台结合的示例. 单独的最新版本的 ... -
调查: 关于GT-Grid导致IE崩溃的问题
2008-09-09 15:39 4224有网友反应 对GT-Grid进行操作时 会导致IE崩溃. ... -
[发布] GT-Grid 1.15 版 (080908发布) ★
2008-09-08 14:10 4220GT-Grid 1.15版 说明文档. 这篇文档主要说明一些 ... -
[发布] GT-Grid 1.12 版 (080904发布) ★
2008-09-03 11:02 5500GT-Grid 1.12版 说明文档. 这篇文档主要说明一些 ... -
奥运结束, GT启航
2008-08-25 10:11 2916前一阵由于关注奥运 GT做的工作比较少 奥运结束了 GT该再 ... -
最近奥运,GT的开发暂停一段时间,抱歉了
2008-08-18 20:13 19658月8号之后 GT的更新速度缓慢了,我回答问题也没有以前及时了 ... -
[发布] GT-Grid 1.0 奥运版 (080808发布) ★ without doc
2008-08-08 17:17 19490由于文档工作滞后 导致我本来放弃了今天发布的念头 但是还是不忍 ... -
GT-Grid 1.0 基础教程(十二)
2008-08-05 02:06 17535GT-Grid 1.0 基础教程(十二) 教程说明: 这是一 ... -
GT-Grid 1.0 基础教程(十一)
2008-08-03 22:29 8244GT-Grid 1.0 基础教程(十一 ... -
GT-Grid 1.0 基础教程(十)
2008-08-03 00:52 16800GT-Grid 1.0 基础教程(十) 教程说明: 这是一个 ... -
GT-Grid 1.0 基础教程(九)
2008-07-28 00:43 15641GT-Grid 1.0 基础教程(九) 教程说明: 这是一个 ... -
我的两点请求, 麻烦关注GT和ecside的朋友看一下,谢谢了
2008-07-27 21:55 30171 恳请大家以后不要通 ...
相关推荐
本基础教程旨在帮助初学者快速理解并掌握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
3. **社区资源**:网上有许多关于ag-Grid的讨论和教程,可以从中获取更多实用技巧和解决常见问题的方法。 总之,这个"Ag-Grid Demo2.7z"是学习和探索ag-Grid的一个好起点,无论你是前端开发者还是数据展示需求者,...
列表组件N0.1(国产) 用过之后你才知道优化 初学者提供问题解答哈 qq 406235245
- **安装**:通常通过npm或yarn进行安装,例如`npm install ag-grid-community`。 - **初始化**:在项目中引入ag-Grid,并创建数据网格实例,设置数据源和列定义。 - **文档与示例**:ag-Grid提供详尽的官方文档和...