`

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的截图,请猛击这里

相关推荐

    GT-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 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 教程示例GT-Grid 教程示例

    gt-grid demo 源码下载

    《GT-Grid 源码解析与后台交互实践》 GT-Grid 是一款功能强大的数据网格组件,广泛应用于Web应用中展示和管理大量结构化数据。本次我们将通过"gt_grid_demo"源码下载来深入理解GT-Grid的运作机制及其与后台数据交互...

    gt-grid 表格源码,开发包,api手册

    "gt-grid 表格源码,开发包,api手册"这一资源主要涵盖了用于构建数据表格的前端组件的源代码、开发工具以及相关的API文档。gt-grid是一个强大的数据展示和操作框架,它允许开发者以灵活的方式展示和管理大量结构化...

    最新的GT-Grid vs EXT-Grid例子(超级经典)

    在例子中,我们可以看到三种不同场景的应用,这些例子可能展示了GT-Grid和EXT-Grid在处理基础数据展示、高级功能集成以及自定义程度上的差异。例如,可能有一个例子专门对比两者的数据加载速度,另一个可能比较各自...

    GT-grid 例子

    GT-Grid 是一款强大的数据网格组件,常用于前端开发中展示和操作大量结构化数据。在Web应用中,它提供了一种高效的方式来呈现表格数据,支持排序、筛选、分页、编辑等多种功能,大大提升了用户体验。这个压缩包文件...

    GT-Grid 是一个基于Ajax技术的列表组件

    GT-Grid 是一个基于Ajax技术的列表组件. 拥有丰富的功能以及良好易用性和用户体验. 它是 EC Side列表组件 的更新换代产品. (ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jsp...

    gt-grid.rar+demo

    "gt-grid.rar+demo"这个压缩包文件包含的是关于"gt-grid"的样例源码。"gt-grid"是一个常见的前端数据展示控件,通常用于创建高性能、可定制的表格,它在Web应用中广泛使用,特别是在大数据量的场景下。下面我们将...

    最新版GT-grid-好用的表格组件

    10. **文档与示例**:为了方便开发者快速上手,GT-grid提供了详尽的文档和丰富的示例代码,从基础用法到高级功能,都有清晰的指导。 在最新的版本中,GT-grid不仅在功能上进行了增强,而且在用户体验和性能优化上也...

    gt-grid 分页 用ajax 开发的 里面有例子

    在本示例中,“gt-grid 分页 用ajax 开发的 里面有例子”显然演示了如何使用`gt-grid`配合Ajax实现分页功能。 首先,我们需要理解Ajax的核心概念。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的...

    网页Grid组件 GT-Grid组件

    网页Grid组件,特别是GT-Grid组件,是Web开发中一种强大的数据展示工具,它为开发者提供了灵活、高效且功能丰富的表格解决方案。Grid组件在网页应用中扮演着至关重要的角色,用于展示结构化数据,支持排序、筛选、...

    GT-GRID插件下载

    GT-GRID是一款基于jQuery的强大的数据网格插件,主要用于展示和操作大量结构化的数据。它在Web应用中常被用于创建功能丰富的表格,提供类似数据库的分页、排序、过滤和编辑功能,使得用户可以方便地浏览和管理数据。...

    Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_

    标题中的“Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_”提到了几个关键元素,分别是“Draw-Grid”,“CATIA 插件”,“catia车线”以及“下载”。这表明我们要讨论的是一个用于CATIA软件的...

    GT-Grid 1.36 版 前后台结合示例

    NULL 博文链接:https://fins.iteye.com/blog/283672

    Ag-Grid Demo2.7z

    3. **社区资源**:网上有许多关于ag-Grid的讨论和教程,可以从中获取更多实用技巧和解决常见问题的方法。 总之,这个"Ag-Grid Demo2.7z"是学习和探索ag-Grid的一个好起点,无论你是前端开发者还是数据展示需求者,...

    GT-Grid 列表组件[1]

    列表组件N0.1(国产) 用过之后你才知道优化 初学者提供问题解答哈 qq 406235245

    前端开源库-ag-grid-community

    - **安装**:通常通过npm或yarn进行安装,例如`npm install ag-grid-community`。 - **初始化**:在项目中引入ag-Grid,并创建数据网格实例,设置数据源和列定义。 - **文档与示例**:ag-Grid提供详尽的官方文档和...

Global site tag (gtag.js) - Google Analytics