- 浏览: 786376 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (573)
- Java基础 (76)
- C++基础 (5)
- hibernate (5)
- struts (4)
- spring (1)
- webservice (7)
- AjaX基础 (0)
- JS脚本 (53)
- 正则表达式 (5)
- html脚本 (30)
- 数据库基础 (54)
- 工作相关 (49)
- 其他 (30)
- Linux (9)
- web服务器 (17)
- JSP (13)
- eclipse (6)
- 面试题相关 (20)
- XML (3)
- Apache common (2)
- 生活 (35)
- VMware (1)
- log4j (9)
- BeanUtils (2)
- 设计模式 (3)
- UML (1)
- UNIX (1)
- ibats (5)
- GT-Grid (17)
- ABAP学习 (17)
- ABAP (35)
- ABAP--ALV (11)
- ABAP--WEBDIMPRO (0)
- abap-sample (1)
- BEMS (2)
- flex (33)
- GIS技术 (3)
最新评论
教程说明:
这是一个告诉大家如何快速的利用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是什么关系?有何异同?
为什么不支持日期类型?日期类型的格式化怎么办?
为什么对中文排序时结果和预期不符?
发表评论
-
ABAP中增减字段前导零函数
2010-04-13 17:23 2972CONVERSION_EXIT_ALPHA_INPUT 功能 ... -
GT-Grid 1.18版 说明文档.
2009-12-23 16:17 966GT-Grid 1.18版 说明文档. ... -
GT-Grid 1.15版 说明文档.
2009-12-23 16:16 1146这篇文档主要说明一些这个版本的变化(新增功能 新特性) = ... -
GT-Grid 1.12版 说明文档.
2009-12-23 16:15 1803GT-Grid 1.12版 说明文档. 这篇文档主要说明一些 ... -
GT-Grid 1.0 基础教程(十三)
2009-12-23 16:14 989教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(十二)
2009-12-23 16:13 958教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(十一)
2009-12-23 16:12 1034教程说明: 这是一个告 ... -
GT-Grid 1.0 基础教程(十)
2009-12-23 16:09 1237GT-Grid 1.0 基础教程(十) ... -
GT-Grid 1.0 基础教程(九)
2009-12-23 16:08 1072教程说明: 这是一个告 ... -
GT-Grid 1.0 基础教程(七)
2009-12-23 16:03 876教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(六)
2009-12-23 15:57 990教程说明: 这是一个告 ... -
GT-Grid 1.0 基础教程(五)
2009-12-23 15:54 877教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(四)
2009-12-23 15:48 850教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(三)
2009-12-23 15:29 821教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(二)
2009-12-23 14:15 963教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(一)
2009-12-23 14:12 951GT-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开发纯客户端只读列表的基本技能。对于那些对Ajax技术下的列表组件不太熟悉的...
**gt-grid基础教程** 在网页开发中,数据的展示往往是不可或缺的部分,特别是在处理大量结构化信息时。`gt-grid`是一款由"胖哥"开发的高效、功能丰富的表格组件,专为页面展示设计,旨在帮助开发者更便捷地构建数据...
在这个“gt-grid的一个例子”中,我们将深入探讨如何使用`gt-grid`的基本功能,并通过实际代码示例来理解其工作原理。 首先,`gt-grid` 提供了灵活的数据绑定机制,可以方便地将后台数据源与前端表格进行对接。在...
GT-Grid 教程示例 GT-Grid 教程示例GT-Grid 教程示例GT-Grid 教程示例
《GT-Grid 源码解析与后台交互实践》 GT-Grid 是一款功能强大的数据网格组件,广泛应用于Web应用中展示和管理大量结构化数据。本次我们将通过"gt_grid_demo"源码下载来深入理解GT-Grid的运作机制及其与后台数据交互...
"gt-grid 表格源码,开发包,api手册"这一资源主要涵盖了用于构建数据表格的前端组件的源代码、开发工具以及相关的API文档。gt-grid是一个强大的数据展示和操作框架,它允许开发者以灵活的方式展示和管理大量结构化...
在例子中,我们可以看到三种不同场景的应用,这些例子可能展示了GT-Grid和EXT-Grid在处理基础数据展示、高级功能集成以及自定义程度上的差异。例如,可能有一个例子专门对比两者的数据加载速度,另一个可能比较各自...
GT-Grid 是一款强大的数据网格组件,常用于前端开发中展示和操作大量结构化数据。在Web应用中,它提供了一种高效的方式来呈现表格数据,支持排序、筛选、分页、编辑等多种功能,大大提升了用户体验。这个压缩包文件...
GT-Grid 是一个基于Ajax技术的列表组件. 拥有丰富的功能以及良好易用性和用户体验. 它是 EC Side列表组件 的更新换代产品. (ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jsp...
"gt-grid.rar+demo"这个压缩包文件包含的是关于"gt-grid"的样例源码。"gt-grid"是一个常见的前端数据展示控件,通常用于创建高性能、可定制的表格,它在Web应用中广泛使用,特别是在大数据量的场景下。下面我们将...
10. **文档与示例**:为了方便开发者快速上手,GT-grid提供了详尽的文档和丰富的示例代码,从基础用法到高级功能,都有清晰的指导。 在最新的版本中,GT-grid不仅在功能上进行了增强,而且在用户体验和性能优化上也...
在本示例中,“gt-grid 分页 用ajax 开发的 里面有例子”显然演示了如何使用`gt-grid`配合Ajax实现分页功能。 首先,我们需要理解Ajax的核心概念。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的...
网页Grid组件,特别是GT-Grid组件,是Web开发中一种强大的数据展示工具,它为开发者提供了灵活、高效且功能丰富的表格解决方案。Grid组件在网页应用中扮演着至关重要的角色,用于展示结构化数据,支持排序、筛选、...
GT-GRID是一款基于jQuery的强大的数据网格插件,主要用于展示和操作大量结构化的数据。它在Web应用中常被用于创建功能丰富的表格,提供类似数据库的分页、排序、过滤和编辑功能,使得用户可以方便地浏览和管理数据。...
标题中的“Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_”提到了几个关键元素,分别是“Draw-Grid”,“CATIA 插件”,“catia车线”以及“下载”。这表明我们要讨论的是一个用于CATIA软件的...
NULL 博文链接:https://fins.iteye.com/blog/283672
3. **社区资源**:网上有许多关于ag-Grid的讨论和教程,可以从中获取更多实用技巧和解决常见问题的方法。 总之,这个"Ag-Grid Demo2.7z"是学习和探索ag-Grid的一个好起点,无论你是前端开发者还是数据展示需求者,...
列表组件N0.1(国产) 用过之后你才知道优化 初学者提供问题解答哈 qq 406235245
- **安装**:通常通过npm或yarn进行安装,例如`npm install ag-grid-community`。 - **初始化**:在项目中引入ag-Grid,并创建数据网格实例,设置数据源和列定义。 - **文档与示例**:ag-Grid提供详尽的官方文档和...