GT-Grid 1.0 基础教程(六)

GT-Grid 1.0 基础教程(六) 

教程说明: 
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程". 
查看其他教程,以及最新版本信息,请点击这里 

第六章: 可编辑列表 之 编辑器的使用 

从这章开始,将为大家讲解"可编辑列表"的实现,预计关于"可编辑列表以及数据保存"的相关内容大概要用掉四至五章的篇幅. 
闲话少说,让我们直入主题吧. 

本章的示例将从 第三章的示例衍生而来, 我们将"mydemo3.html"另存为"mydemo6.html". 

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

让第三章中的列表变为可编辑列表很简单. 首先,我们拿英语和数学成绩 做例子. 
在这个列表中, 我们希望学生的英语和数学成绩是可编辑的. 编辑这两列的要求很简单: 
1 编辑时使用普通文本框. 
2 只能是浮点数 
3 是必填项. 

我们首先修改 columns中 对这两列的定义, 将它们修改成下面的样子. 

Javascript代码  

1. var colsConfig = [  
2.     /* 略去其他设置 */  
3.     { id : 'english' , header : "英语" , width : 60 , align :'right' , editor: { type :'text' ,validRule : 'R,float' }  },  
4.     { id : 'math'    , header : "数学" , width : 60 , align :'right' , editor: { type :'text' ,validRule : 'R,float' }  },  
5. ]  

列定义中加入了 " 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. 

修改列定义如下: 

Javascript代码  

1. var colsConfig = [  
2.     /* 略去其他设置 */  
3.     { id : 'gender'  , header : "性别" , width : 50 ,  
4.         editor : { type :'select' ,options : {'U': '未知' , 'M':'男', 'F':'女'}  },  
5.         renderer : GT.Grid.mappingRenderer(  {'U': '未知' , 'M':'男', 'F':'女'} , '未知' )  
6.     },  
7. ]  

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分以上 


修改列定义如下: 

Javascript代码  

1. var colsConfig = [  
2.     /* 略去其他设置 */  
3.     { id : 'math'    , header : "数学" , width : 60 , align :'right' ,      
4.         editor: { type :'text' ,  
5.           
6.             validator : function(value,record,colObj,grid){   
7.   
8.                 // 将输入的数学成绩转换成数值形.  
9.                 value=Number(value);  
10.   
11.                 //取得英语成绩,并转换成数值形.  
12.                 var english = Number(record['english']);  
13.                   
14.                 // 做校验  
15.                 if ( !isNaN(value) && ( value>10 && value< 100 ) && ( english-value <= 30 ) )   {  
16.                     return true;  
17.                 }  
18.                 return " 数学成绩 必须满足下列条件:\n"+  
19.                         " 1 输入的必须是 10到100之间(开区间)的整数.\n"+  
20.                         " 2 数学成绩 不能比 英语成绩 少30分以上.";  
21.               
22.             }   
23.         }    
24.     },  
25. ]  

我们通过给 editor 指定 validator 属性来实现自定义校验函数的功能. 
validator 属性值为一函数, 参数有4个 

value : 编辑器输入的值,也就是待校验的指 
record : 编辑的当前记录 
colObj : 编辑的列的列对象(记录了列信息) 
grid : 当前的grid对象 

通常我们只需要使用前两个属性. 
函数的返回值有两种, 一种是true 标示校验通过. 
另一种是一个非空字符串, 用来当作错误提示信息. 
此时, 就无需再给editor指定校验规则了. 也就是说 vaildRule 和 validator 属性不能共存. 



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



除了自定义校验函数之外, 还有一个功能也是我们常见的, 就是"输入值的自动转换". 
例如有时候我们会有这样的需求. 
该列只允许输入 小数位数最多为1位的浮点数, 当编辑时 如果输入的值的小数位数超过了1位, 我们并不希望提示用户"输入错误" 
而是希望自动截去多余的小数. 
这个功能 GT.Grid也是支持的 (GT-Grid 真是强大啊 哈哈哈) 

但是这个功能也暂时先不讲解. 

关于 编辑器以及其他方面的一些更多 更高级的内容 本基础教程暂时都不会讲解. 
原因如下 : 

1 一些高级特性 我这里设计的可能还够好 未来还会有变动,在稳定前不打算告诉大家 
2 高级内容未必实用,使用的人未必多, 我目前打算集中经历写出对大多数人有用的教程. 
3 不适合放到此基础教程中(废话). 
4 什么东西都在教程里讲清楚了,以后就没人提问题了, 那么圈子 群 就不热闹了 (嘿嘿嘿, 邪恶的笑) 



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


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

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

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