大城小胖的大城

GT-Grid 1.0 基础教程(六)

教程说明:
这是一个告诉大家如何快速的利用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 什么东西都在教程里讲清楚了,以后就没人提问题了, 那么圈子 群 就不热闹了 (嘿嘿嘿, 邪恶的笑)



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


好了 这章就讲解到这里.下章将讲解 如何将编辑后的数据传递给服务端 并保存.

前一阵有朋友反应 第四章和第五章 说的不是很明白, 在这里我向大家道个歉.
等 与后台结合的示例 推出后 ,大家看例子 以及例子里的代码也许会更明白一些.

估计 第七章 也会和 第四 五章一样 稍微难懂一些 (因为又是与后台结合)
请大家见谅.