GT-Grid 1.0 基础教程(六)

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 什么东西都在教程里讲清楚了,以后就没人提问题了, 那么圈子 群 就不热闹了 (嘿嘿嘿, 邪恶的笑)



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


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

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

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

评论

22 楼 itlieying 2008-08-08  

呵呵，这些功能再完善的话，估计GT-Grid就更强大了……期待中……

21 楼 fins 2008-08-08  

哦 原来你这个是纵表啊
这个"只提交改动过的字段"的功能是提供的
不过目前没有一个很好的接口
正式版本中 会提供这个接口
同时文档也会补充相关说明, 敬请期待

20 楼 itlieying 2008-08-08  

fins,请教一下
场景：
需要用GT-Grid展示和维护班级中学生期中考成绩，字段有数学，英语，政治，物理，化学等，表格里头的数据能够通过数据库动态读取出来，现在想修改，比如说，想改小明同学英语成绩，想把小明同学之前的英语成绩去掉，或者置空，然后把空值保存在数据库里头。
GT-Grid传给servlet的是小明同学的整条记录，这样，只能把小明所有学科没改动的值都要在数据库里头重新填一下，数据库里头的表设计是：同学名称，学科，学科成绩

如果，我只修改了班级里头所有同学的同一门学科，这样就造成所有同学的各科成绩都得在数据库里头刷新重填一遍，而那些没有改动的成绩也得刷新，这样不是造成时间上很大的浪费吗？
有没有什么好方法可以避免这些？

19 楼 fins 2008-08-06  

你的意思是 在表格创建以后 想修改表头信息 是吗??

我会在下一个版本提供这个方法的 谢谢

18 楼 itlieying 2008-08-06  

就是想修改header在页面上显示的名称，

17 楼 fins 2008-08-06  

itlieying :
现在发布的版本有bug 导致 你的那个editor的需求暂时无法满足

另外 修改列表头是什么意思???
可以通过 header属性来设置啊

16 楼 itlieying 2008-08-06  

有没有办法实现表头标题的修改？

15 楼 itlieying 2008-08-06  

fins，
能否给我们提供一些关于GT.EditDialog 函数的例子，我是想实现在切换点击其它列单元格时都能弹出同一个编辑对话框，以及后台在保存数据时，把异常信息通过GT-Grid来展示给用户

14 楼 fins 2008-08-04  

你那么写确实有问题
我明天写一个例子出来吧

13 楼 itlieying 2008-08-04  

fins,
若把GT.Dialog 换成 GT.EditDialog
之前其它代码不变，此时页面没有报错，但是此次没有数据导入，
我若换成GT.Dialog调试程序，则有数据显示，但是仍旧是上述问题，
是不是在colsConfig各列中定义的editor: DialogEditorCreater这样定义有问题？

12 楼 fins 2008-08-04  

GT.Dialog 换成 GT.EditDialog

11 楼 itlieying 2008-08-04  

fins,你好，请教你昨天的那一个问题，具体内容是这样子的：
情况：当点击第一列内单元格，弹出对话框，进行编辑完之后，继续点第二列GT-GRID顔色变成暗灰状态，无法继续编辑

查看页面错误。

行：1
Char:1
错误：'this.bodyDiv.style'为空或不是对象
代码：0

代码设置 在colsConfig 里头，每一列都设置editor: DialogEditorCreater
页面里头申明对象
var DialogEditorCreater = function(){
var myd = new GT.Dialog({
id: "myDiaLogEditor1",
gridId : "grid1" ,
width: 250 ,
height:150 ,
title : '姓名 编辑器' ,
body : ['<textarea id="sql_input" rows="5" cols="20" style="width:99%"></textarea><br/>',
'<input type="button" value="确定" onclick="GT.$grid(\'grid1\').activeDialog.confirm()"/>'].join(''),
getValue : function(){
return GT.$("sql_input").value;
},
setValue : function(value){
GT.$("sql_input").value = value;
},
active : function(){
GT.U.focus(GT.$("sql_input"));
}
});
return myd;
};

请问，这是什么原因所致，该怎么解决？

10 楼 fins 2008-08-03  

那就把所有列的 editor都指向这个对话框就可以了

9 楼 itlieying 2008-08-03  

嗯，是的，列的数量不固定，希望单击所有列时都能够弹出一个textarea，可以在里头编辑

8 楼 fins 2008-08-03  

所有的列都使用 同一个editor吗?

7 楼 itlieying 2008-08-03  

fins辛苦了，在此谢谢先！
小弟最近看了GT-Grid的一些基础教程， 现在尝试，
其中fins，在处理单击某一列内的单元格会弹出一个文本框，
即通过在colscofig 指定列内加上
editorer：
function(){
var myd = new GT.Dialog({
id: "myDiaLogEditor1",
gridId : "myGrid1" ,
width: 250,
height:150 ,
title : '姓名 编辑器',
body : ['<textarea id="my_name_input" rows="5" cols="20" style="width:99%"></textarea><br/>',
'<input type="button" value="确定" onclick="GT.$grid(\'myGrid1\').activeDialog.confirm()"/>'].join(''),

getValue : function(){
return GT.$("my_name_input").value;
},

setValue : function(value){
GT.$("my_name_input").value=value;
},
active : function(){
GT.U.focus(GT.$("my_name_input"));
}
});
return myd;
}

即可实现，
那么请问如果想对多个列（不确定数目）都能实现同样功能。该怎么实现？

6 楼 fins 2008-07-21  

如果你这个 数据 打算和 grid  load 的数据一起返回

那么你可以在 服务端生成的 json 里加入这个节点
然后在 loadResponseHandler 方法里 取得这个值 同时赋值个页面中的某个对象的某个属性

然后 editor 的 options 指向这个属性




说起来比较复杂 实现起来也不是很难. 不知道你理解没
如果没理解去 群里 交流吧

你是 群里的哪一位??

5 楼 fins 2008-07-21  

这个不支持的 你可以自己先从数据库中获得 然后 存入一个 json对象内

我做的是列表组件 不是一个全功能的 comboselect 所以你希望那个这个editor像ext那样自己本身还只是 loadURL 是不太现实的

4 楼 nicksean 2008-07-21  

type :'select' 的值如何从数据库中获得？

3 楼 fins 2008-07-21  

欲查看GT-Grid的截图,请猛击这里