- 浏览: 2584679 次
- 性别:
- 来自: 小胖儿的大城
文章分类
最新评论
-
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开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第八章: 可编辑列表 之 添加记录
这章将主要讲解,如何添加记录
将上一章编写的"mydemo7.html"另存为"mydemo8.html".
=========================================
要添加记录,首先要做的就是在工具栏上增加一个"添加记录"的按钮,只需在 toolbarContent 里加入 "add"即可.
这时候,工具栏会多出一个"+"按钮, 点击他就可以增加数据了.
默认情况下,点击添加按钮, 会增加一条空记录. 该记录和数据集里已存在的记录具有相同的结构和字段, 所不同的是所有的字段值都是空字符串''.
在本例中, 我们允许编辑的列是 数学成绩 和 英语成绩. 但是对新增加的记录, 学号 姓名 年龄 也需要是可编辑的
(total由于是由另两个值计算而来,而详细信息为扩展的显示列,所以该两列无需编辑)
如果我们希望某一列只有在新增数据时是可编辑的, 那么只要为该列指定编辑器(editor),同时设置列属性 editable 为 false 即可.
示例如下:
其中前三列, 对于现有数据是无法进行编辑的, 但是新增加的记录是可编辑的.
=========================================
前面讲的内容 告诉了大家如何添加一条空记录, 同时对它进行编辑.
但是很多时候,我们并不希望新增加的数据是空的, 而是有默认值的(就相当于提供一个新记录的模板)
我们可以通过 设置 grid的 defaultRecord属性来实现这个功能.
该属性值 可以为一个 缺省的reocrd对象,该对象和现有的record结构一致.
如下面的代码:
那么此时新增的记录将不再是空的新记录, 而是有默认值的新记录.
上面的例子详细介绍了 如何使用 新数据的静态模板.
其实有时候我们的模板是动态的.对于这种情况, GT-Grid也是支持的.
defaultRecord 也可以是一个函数, 该函数返回值是一个缺省的reocrd对象,该对象和现有的record结构一致.
例如你希望新加入的一行记录的值 默认等于 列表某一条记录.
这时候 defaultRecord属性的指就是一个function了. 参数grid, dataset分别代表当前表格 和当前数据集 )
=========================================
GT-Grid 的编辑 默认支持 "跨页编辑,一次保存".
也就是使用者无需 编辑一页 保存一次, 可以在多页之间编辑 然后一次保存.
不过为了更好的实现这个功能, 建议在 dataset 定义中 通过"uniqueField"属性来指定"唯一索引列/主键/唯一性字段".
虽然这么做不是必须的, 但是强烈建议开发者为每一个dataset都指定uniqueField.
uniqueField就是 告诉GT,数据中 哪一列是具有唯一性的. 例如,在本例中 学号"no" 是数据的主键. 那么就可以像下面这样定义:
如果 数据的 "唯一性字段" 是一个联合主键(由多个字段共同确定唯一性) ,
那么实现也很简单:
1 定义一个扩展数据列 , 类似上面的total.
2 在该扩展列的 initValue 方法里 ,返回 联合主键拼接成的字符串(中间要用有特殊字符链接一下).
例如, 假设, no并不能确定唯一性, 而是需要 no 和 age 共同确定唯一性 , 那么我们可以这么定义:
为什么要用"__"这类的特殊字符链接一下?
理由很简单, 确保拼接出来的字符串具有唯一性.
如果不这么做,而是直接相连 , 那么对于"1号19岁的同学 , 11号9岁的同学"这样的数据就难以区分了.
=========================================
加入添加数据功能后, 提交的数据里 insertedRecords 下面就会有删除的记录信息.
然后还是 json串--->java对象的转换. 这里就不再累述.
对于新增的数据, 在点击保存的时候, GT-Grid会对数据再次进行校验, 以防止用户与在点击"+"按钮后, 不去碰那些新增加的数据.
=========================================
到目前为止, "用GT-Grid创建一个支持CRUD的列表"的全部过程我们就讲解完了.
但是这些只是GT-Grid的最基本的功能而已, 下一章开始 将为大家讲解更多深入的内容,包括:
对数据进行排序和过滤 ,对列进行冻结/隐藏/编组, 以及GT-Grid的事件机制, 复杂表头列表....还有更多其他的功能.
同时 还将推出 FAQ & How To ... 系列教程. 专门用来讲解那些 相对细小同时不易分类的知识.
=========================================
P.S.:
感觉这篇没有之前被我误删除的那篇"第八章"写的好 写文档和写文学作品一样 需要灵感, 我的灵感都在丢失的第八章里用尽了 ...
计划中的 "FAQ & How To ..." 内容:
如何实现数据导出?
如何在重新统计总行数?
如何在编辑时将错误输入自动转换成正确的值,而不是提示错误信息?
GT-Grid和ECSide是什么关系?有何异同?
为什么不支持日期类型?日期类型的格式化怎么办?
为什么对中文排序时结果和预期不符?
教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第八章: 可编辑列表 之 添加记录
这章将主要讲解,如何添加记录
将上一章编写的"mydemo7.html"另存为"mydemo8.html".
=========================================
要添加记录,首先要做的就是在工具栏上增加一个"添加记录"的按钮,只需在 toolbarContent 里加入 "add"即可.
var gridConfig={ /* ... 略去其他属性设置 ...*/ toolbarContent : 'nav | goto | pagesize | reload | add del save | state' , };
这时候,工具栏会多出一个"+"按钮, 点击他就可以增加数据了.
默认情况下,点击添加按钮, 会增加一条空记录. 该记录和数据集里已存在的记录具有相同的结构和字段, 所不同的是所有的字段值都是空字符串''.
在本例中, 我们允许编辑的列是 数学成绩 和 英语成绩. 但是对新增加的记录, 学号 姓名 年龄 也需要是可编辑的
(total由于是由另两个值计算而来,而详细信息为扩展的显示列,所以该两列无需编辑)
如果我们希望某一列只有在新增数据时是可编辑的, 那么只要为该列指定编辑器(editor),同时设置列属性 editable 为 false 即可.
示例如下:
var colsConfig = [ /* ... 略去其他属性设置 ...*/ { id : 'no' , header : "学号" , width : 50 , editable:false , editor: { type :'text' ,validRule : 'R,integer' }}, { id : 'name' , header : "姓名" , width : 100 , editable:false , editor: { type :'text' ,validRule : 'R' }}, { id : 'age' , header : "年龄" , width : 50 , editable:false , editor: { type :'text' ,validRule : 'R,integer' }}, ];
其中前三列, 对于现有数据是无法进行编辑的, 但是新增加的记录是可编辑的.
=========================================
前面讲的内容 告诉了大家如何添加一条空记录, 同时对它进行编辑.
但是很多时候,我们并不希望新增加的数据是空的, 而是有默认值的(就相当于提供一个新记录的模板)
我们可以通过 设置 grid的 defaultRecord属性来实现这个功能.
该属性值 可以为一个 缺省的reocrd对象,该对象和现有的record结构一致.
如下面的代码:
var gridConfig={ /* ... 略去其他属性设置 ...*/ defaultRecord : { no : 111 , name :'(请输入姓名)', age : 11, gender : 'U' , english : 60 , math :60 } }
那么此时新增的记录将不再是空的新记录, 而是有默认值的新记录.
上面的例子详细介绍了 如何使用 新数据的静态模板.
其实有时候我们的模板是动态的.对于这种情况, GT-Grid也是支持的.
defaultRecord 也可以是一个函数, 该函数返回值是一个缺省的reocrd对象,该对象和现有的record结构一致.
例如你希望新加入的一行记录的值 默认等于 列表某一条记录.
defaultRecord : function(grid, dataset ){ /* 伪代码 */ var record= grid.getRecord(0); // 取得grid.中的第一行记录 var rr= clone(record); // 克隆record. (注意 一定要clone) return rr; // 返回 克隆的记录,作为数据模板. }
这时候 defaultRecord属性的指就是一个function了. 参数grid, dataset分别代表当前表格 和当前数据集 )
=========================================
GT-Grid 的编辑 默认支持 "跨页编辑,一次保存".
也就是使用者无需 编辑一页 保存一次, 可以在多页之间编辑 然后一次保存.
不过为了更好的实现这个功能, 建议在 dataset 定义中 通过"uniqueField"属性来指定"唯一索引列/主键/唯一性字段".
虽然这么做不是必须的, 但是强烈建议开发者为每一个dataset都指定uniqueField.
uniqueField就是 告诉GT,数据中 哪一列是具有唯一性的. 例如,在本例中 学号"no" 是数据的主键. 那么就可以像下面这样定义:
var dsConfig= { data : data1 , uniqueField : 'no' , fields :[ {name : 'no' , type: 'int' }, {name : 'name' }, {name : 'age' , type: 'int' }, {name : 'gender' }, {name : 'english', type: 'float' }, {name : 'math' , type: 'float' }, {name : 'total' , type: 'float', initValue : function(record){ return record['english'] + record['math']; } } ] };
如果 数据的 "唯一性字段" 是一个联合主键(由多个字段共同确定唯一性) ,
那么实现也很简单:
1 定义一个扩展数据列 , 类似上面的total.
2 在该扩展列的 initValue 方法里 ,返回 联合主键拼接成的字符串(中间要用有特殊字符链接一下).
例如, 假设, no并不能确定唯一性, 而是需要 no 和 age 共同确定唯一性 , 那么我们可以这么定义:
var dsConfig= { data : data1 , fields :[ {name : 'no' , type: 'int' }, {name : 'name' }, {name : 'age' , type: 'int' }, {name : 'gender' }, {name : 'english', type: 'float' }, {name : 'math' , type: 'float' }, {name : 'total' , type: 'float', initValue : function(record){ return record['english'] + record['math']; } }, {name : 'stdKey' , initValue : function(record){ return record['no'] +'__' + record['age']; } } ], uniqueField : 'stdKey' };
为什么要用"__"这类的特殊字符链接一下?
理由很简单, 确保拼接出来的字符串具有唯一性.
如果不这么做,而是直接相连 , 那么对于"1号19岁的同学 , 11号9岁的同学"这样的数据就难以区分了.
=========================================
加入添加数据功能后, 提交的数据里 insertedRecords 下面就会有删除的记录信息.
然后还是 json串--->java对象的转换. 这里就不再累述.
对于新增的数据, 在点击保存的时候, GT-Grid会对数据再次进行校验, 以防止用户与在点击"+"按钮后, 不去碰那些新增加的数据.
=========================================
到目前为止, "用GT-Grid创建一个支持CRUD的列表"的全部过程我们就讲解完了.
但是这些只是GT-Grid的最基本的功能而已, 下一章开始 将为大家讲解更多深入的内容,包括:
对数据进行排序和过滤 ,对列进行冻结/隐藏/编组, 以及GT-Grid的事件机制, 复杂表头列表....还有更多其他的功能.
同时 还将推出 FAQ & How To ... 系列教程. 专门用来讲解那些 相对细小同时不易分类的知识.
=========================================
P.S.:
感觉这篇没有之前被我误删除的那篇"第八章"写的好 写文档和写文学作品一样 需要灵感, 我的灵感都在丢失的第八章里用尽了 ...
计划中的 "FAQ & How To ..." 内容:
如何实现数据导出?
如何在重新统计总行数?
如何在编辑时将错误输入自动转换成正确的值,而不是提示错误信息?
GT-Grid和ECSide是什么关系?有何异同?
为什么不支持日期类型?日期类型的格式化怎么办?
为什么对中文排序时结果和预期不符?
评论
7 楼
fins
2008-08-28
insert : function(record)
参数是一条新的记录 (和现有dataset中的一致)
参数是一条新的记录 (和现有dataset中的一致)
6 楼
飞天色鼠
2008-08-27
有没有直接添加的方法?add()?或insert()
比如我想自己放置一个按钮(Grid外面)而不是用Grid上的添加按钮,点击按钮的时候添加一条数据到Grid里。该如何操作?
比如我想自己放置一个按钮(Grid外面)而不是用Grid上的添加按钮,点击按钮的时候添加一条数据到Grid里。该如何操作?
5 楼
fins
2008-08-05
"调用哪一个方法"?
你这个问题问的太抽象?
是前台还是后台 还是数据库端??
另外 添加记录不是调用方法 你只要点击 添加按钮就可以了
你可以看一下 最新版本中的 j2ee示例
你这个问题问的太抽象?
是前台还是后台 还是数据库端??
另外 添加记录不是调用方法 你只要点击 添加按钮就可以了
你可以看一下 最新版本中的 j2ee示例
4 楼
deng.xiong
2008-08-05
我从数据库取出一行记录,我该调用哪一个方法插入一行新的记录?!
3 楼
fins
2008-08-01
啊?? 我这里不会啊
您使用的版本是???
您使用的版本是???
2 楼
kevin_gzhz
2008-08-01
LZ:
按照你教程的说法,设置id : 'no' , header : "学号" , width : 50 , editable:false , editor: { type :'text' ,validRule : 'R,integer' }}后,只有在新增的一行中的学号可以被编辑,原有数据不能被编辑,可实际上怎么所有行的数据的学号都可以编辑了啦?
请LZ检查一下!
按照你教程的说法,设置id : 'no' , header : "学号" , width : 50 , editable:false , editor: { type :'text' ,validRule : 'R,integer' }}后,只有在新增的一行中的学号可以被编辑,原有数据不能被编辑,可实际上怎么所有行的数据的学号都可以编辑了啦?
请LZ检查一下!
1 楼
loolin
2008-07-29
支持
发表评论
-
那些成天说我的GT-Grid抄袭的人注意了
2009-03-19 22:01 10162你们能够在浩瀚的网络中找到 sigmawidgets htt ... -
[发布]GT-Grid 1.42 版 ★& "前后台结合示例"★2009-01-15更新
2009-01-15 02:41 27360=============================== ... -
[发布]GT-Grid 1.36 版 ★& "前后台结合示例"★2008-12-01 12AM 更新
2008-12-01 01:27 10321(最后更新时间 :12月1日 中午12点时, 修正了 1.36 ... -
GT-Grid 近期将会发布一个bug修正版本,然后将会进行较大的重构
2008-11-11 00:12 3828GT-Grid 近期将会发布一个bug修正版本, 主要修正上一 ... -
[发布]GT-Grid 1.25 版 ★& "前后台结合示例" ★2008-10-21 更新
2008-10-21 17:25 19642首先 先道个歉. 之前许诺过 10月20日之前发布,结果迟到了 ... -
对于复杂javabean到json串的转换,建议使用FlexJSON
2008-10-16 11:23 9852gt-grid自带的那个 javaBean与json的转换工具 ... -
[通知] GT-Grid 讨论群 变更
2008-10-10 15:54 2991GT-Grid的群建立至今, 用户早已满员, 每日还有很多申请 ... -
10月中旬支持导出excel和csv的gt-grid会推出
2008-10-04 21:19 263010月中旬支持导出excel和csv的gt-grid会推出 ( ... -
[发布]GT-Grid 1.18版 & "前后台结合示例"更新 ★2008-09-12发布
2008-09-12 16:40 12534这个版本带有 与java后台结合的示例. 单独的最新版本的 ... -
调查: 关于GT-Grid导致IE崩溃的问题
2008-09-09 15:39 4043有网友反应 对GT-Grid进行操作时 会导致IE崩溃. ... -
[发布] GT-Grid 1.15 版 (080908发布) ★
2008-09-08 14:10 4100GT-Grid 1.15版 说明文档. 这篇文档主要说明一些 ... -
[发布] GT-Grid 1.12 版 (080904发布) ★
2008-09-03 11:02 5314GT-Grid 1.12版 说明文档. 这篇文档主要说明一些 ... -
奥运结束, GT启航
2008-08-25 10:11 2764前一阵由于关注奥运 GT做的工作比较少 奥运结束了 GT该再 ... -
最近奥运,GT的开发暂停一段时间,抱歉了
2008-08-18 20:13 19118月8号之后 GT的更新速度缓慢了,我回答问题也没有以前及时了 ... -
[发布] GT-Grid 1.0 奥运版 (080808发布) ★ without doc
2008-08-08 17:17 19315由于文档工作滞后 导致我本来放弃了今天发布的念头 但是还是不忍 ... -
GT-Grid 1.0 基础教程(十二)
2008-08-05 02:06 17438GT-Grid 1.0 基础教程(十二) 教程说明: 这是一 ... -
GT-Grid 1.0 基础教程(十一)
2008-08-03 22:29 8162GT-Grid 1.0 基础教程(十一 ... -
GT-Grid 1.0 基础教程(十)
2008-08-03 00:52 16712GT-Grid 1.0 基础教程(十) 教程说明: 这是一个 ... -
GT-Grid 1.0 基础教程(九)
2008-07-28 00:43 15530GT-Grid 1.0 基础教程(九) 教程说明: 这是一个 ... -
我的两点请求, 麻烦关注GT和ecside的朋友看一下,谢谢了
2008-07-27 21:55 29711 恳请大家以后不要通 ...
相关推荐
GT-Grid 1.0 基础教程GT-Grid 1.0 基础教程GT-Grid 1.0 基础教程GT-Grid 1.0 基础教程
教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
GT-Grid 教程示例 GT-Grid 教程示例GT-Grid 教程示例GT-Grid 教程示例
gt-grid 基础教程。胖哥的gt-grid用于页面展示的功能强大的表格组件
gt-grid是一款不错的框架,我写的这个gt-grid例子,用的都是基本框架,里面都用详细的注释,希望能对学习gt-grid的朋友有所帮助
GT-Grid 是一个基于Ajax技术的列表组件. 拥有丰富的功能以及良好易用性和用户体验. 它是 EC Side列表组件 的更新换代产品. (ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jsp...
GT-Grid 的最新版本 + 与后台结合的例子 大家重点看action 里是如何从客户端取数据 以及如何向客户端送数据的
最新的GT-Grid vs EXT-Grid例子是用GT-Grid表格控件和EXT-Grid表格控件来进行比较、里面有三个例子、看了这后觉得这两种表格显示数据控件功能实在太强大啦..
GT-grid 例子
gt-grid 样例源码
网页Grid组件 GT-Grid组件 牛逼的Grid组件 Web开发理想的Grid,内附说明和例子
最新版GT-grid-好用的表格组件,支持分页,过滤,排序等等
NULL 博文链接:https://fins.iteye.com/blog/283672
gt-grid_1[1].25 分页 用ajax 开发的 里面有例子与还有原代码
列表组件N0.1(国产) 用过之后你才知道优化 初学者提供问题解答哈 qq 406235245
NULL 博文链接:https://wfl8015.iteye.com/blog/310981
grid控件列表!这是jquery的一个grid插件GT-GRID,支持分页、排序等功能
ag-grid我没找到汉化提示的js(没仔细找),下载了官方的社区版js代码,记事本查找替换的,如果没积分可以自己搜索替换,我只改了contains(模糊查找)、not contains(模糊过滤)、equals(精确查找)、not equals...
前端开源库-ag-grid-communityAG网格社区,支持javascript/react/angularjs/web组件的高级数据网格/数据表
CATIA 制图放置车线使用插件,制图放置车线使用插件制图放置车线使用插件