- 浏览: 786445 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (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 1.0 基础教程(十)
教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第十章: 事件
这一章将讲解一下 GT-Grid中的一些关键的 常用的事件机制.
本章对应示例文件: "mydemo10.html".
为grid加入事件,只需要在 gird的定义中写入GT-Grid所支持的事件即可.
如 :
GT-Grid本身支持很多事件, 但是其中并不是所有事件都是常用或者重要的. 本章将结合示例,挑选几个常用的事件进行讲解.
更多的事件,请查阅"参考指南".
在正式讲解"事件"之前,先让我们来了解一下 GT-Grid创建并显示一个列表的大致步骤:
1 根据定义,创建列表的外观(外框,布局)
2 创建列表的各个部件(表头,工具栏等等)
3 第2步完成后, 去异步的加载数据
4 第3步完成后, 创建列表数据区,并显示
在列表创建之后, 再对列表执行 刷新 翻页 等数据操作时, 实际上执行的只是第3 4步.
在明白上面的几个步骤之后,我们来看看今天要讲解的事件:
注意:
下列所有名为beforeXXXX的事件,都是在发生XXXX动作之前被调用, 如果该事件函数的返回值为false, 那么就可以阻止XXXX动作的发生.
对于上面提到的事件, 仅仅有这些简短的文字说明,也许大家无法完全理解,
建议大家可以动手试一试, 为grid指定上述事件, 然后在事件里进行 alert ,好好体会一下这些事件触发的时机.
=========================================
下面将结合一个示例,来为大家演示如何利用事件来强化列表.
我们假设这样一个场景: 选中列表中的某一行,然后将这一行对应的记录添加到列表下方的一个表单内.
首先我们在列表的下方加入一个极其简单的form:
然后为列表指定 afterSelectRow事件.
运行一下就可以看到效果了. afterSelectRow 对应函数内的具体代码大家不必关注.
大家要在意的是 这个事件触发的时机 ---- 选中某行之后.
以及 事件的参数 : record ---- 选中行对应的记录.
合理的使用该函数,可以比较轻松的实现主从表 列表与其他组件联动等效果.
=========================================
下面我们再举一个例子. 假设这样一个场景: 在编辑数据时,对于性别未知的同学,我们不允许编辑其数据.
那么我们可以利用 beforeXXXX 类事件的拦截机制来实现.
现在运行一下示例, 在点击 性别为"未知"的学生时, 我们无法进入编辑状态,也无法删除之.
=========================================
在诸多事件中, beforeLoad 和 beforeSave.这两个事件需要特别说一下.
之所以要特别提一下它们,是因为这两个事件处在 客户端与服务端通讯的关键路径上.
它们的第一个参数就是 GT-Grid要发送给服务端的数据.
开发人员可以在这两个事件中, 对提交的数据进行个性化处理(改变/增加/删除提交的数据)
同时也可以利用return false 来阻止load/save操作,
甚至也可以在这两个事件里alert出提交的数据内容,来帮助自己调试程序.
在这里只举一个简单的例子,
这个示例中, 用户在点击"save"按钮时,将会弹出提示信息,询问用户确实要提交数据吗,
点击确定 将会提交, 点击取消 将什么都不做.
代码 : GT.$json(reqParam,true)
用来生成 提交参数的JSON串(第二个参数为是否是格式化输出), 可用来实现对提交数据的监控.
=========================================
关于GT-Grid的事件就先讲到这里, 事件其实是个很灵活的机制, 只要合理的利用,并且发挥自己的想象力, 可以扩展出很多GT-Grid本身不具备的功能.
好了 本章就暂时说这些吧. 下一章见.
教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第十章: 事件
这一章将讲解一下 GT-Grid中的一些关键的 常用的事件机制.
本章对应示例文件: "mydemo10.html".
为grid加入事件,只需要在 gird的定义中写入GT-Grid所支持的事件即可.
如 :
var gridConfig={ /* ... 略去其他属性设置 ...*/ afterSelectRow : function(record ,row, rowNo,grid){ // ... ... } }
GT-Grid本身支持很多事件, 但是其中并不是所有事件都是常用或者重要的. 本章将结合示例,挑选几个常用的事件进行讲解.
更多的事件,请查阅"参考指南".
在正式讲解"事件"之前,先让我们来了解一下 GT-Grid创建并显示一个列表的大致步骤:
1 根据定义,创建列表的外观(外框,布局)
2 创建列表的各个部件(表头,工具栏等等)
3 第2步完成后, 去异步的加载数据
4 第3步完成后, 创建列表数据区,并显示
在列表创建之后, 再对列表执行 刷新 翻页 等数据操作时, 实际上执行的只是第3 4步.
在明白上面的几个步骤之后,我们来看看今天要讲解的事件:
注意:
下列所有名为beforeXXXX的事件,都是在发生XXXX动作之前被调用, 如果该事件函数的返回值为false, 那么就可以阻止XXXX动作的发生.
onComplete : function(grid) 该事件在第4步完成之后调用,唯一参数就是 grid对象本身. beforeRefresh : function(grid) 该事件在第3步完成之后, 第4步之前调用,唯一参数就是 grid对象本身. beforeLoad : function(reqParam,grid) 该事件在第3步完成之前(从服务端加载数据之前) 参数reqParam为Gt-Grid准备传递给服务端的json对象, 大家可以根据需求来改动里面的指. 最后一个参数是 grid对象本身. beforeSave : function(reqParam,grid) 该事件在点击保存按钮之后, 数据提交到服务端之前被执行. 参数reqParam为Gt-Grid准备传递给服务端的json对象, 大家可以根据需求来改动里面的指. 最后一个参数是 grid对象本身. beforeSelectRow : function(record ,row, rowNo,grid) 该事件在选中某一行的之前触发(点击某一行,但是GT-Grid还没有把该行标记为选中行) record 为欲选中的行对应的记录, row为欲选中的行(tr)对象, rowNo为行号, 最后一个参数是 grid对象本身. afterSelectRow : function(record ,row, rowNo,grid) 该事件在选中某一行的之后触发(点击某一行,且GT-Grid已经把该行标记为选中行) record 为刚刚选中的行对应的记录, row为刚刚选中的行(tr)对象, rowNo为行号, 最后一个参数是 grid对象本身. onClickCell : function(value,record,cell,row,colNo,rowNo,columnObj,grid,event) 该事件在点击列表区的单元格时触发 点击的单元格对应的记录值, 点击的单元格所在行对应的记录, 点击的单元格(td)对象, 点击的单元格所在的行(tr)对象, 点击的单元格对应的列定义, grid对象本身, 点击动作对应的浏览器事件对象 onSelectCell : function(value,record,cell,row,colNo,rowNo,columnObj,grid,event) 该事件在选中单元格之后触发(如果通过鼠标点击选中,那么会发生在onCLickCell事件之后) 点击的单元格对应的记录值, 点击的单元格所在行对应的记录, 点击的单元格(td)对象, 点击的单元格所在的行(tr)对象, 点击的单元格对应的列定义, grid对象本身, 点击动作对应的浏览器事件对象 onDblClickCell : function(value,record,cell,row,rowNo,columnObj,grid,event) 该事件在双击击列表区的单元格时触发 双击的单元格对应的记录值, 双击的单元格所在行对应的记录, 双击的单元格(td)对象, 双击的单元格所在的行(tr)对象, 点击的单元格对应的列定义, grid对象本身, 双击动作对应的浏览器事件对象 beforeEdit : function(value,record,columnObj,grid) 该事件在编辑单元格之前触发.(点击某个可编辑单元格,进入编辑状态之前) value 为欲编辑的值 , record 为欲编辑的值所在的记录, columnObj为欲编辑的列对应的列定义, 最后一个参数是 grid对象本身. beforeDelete : function(record,row,grid) 该事件在删除记录之前触发. record 为欲删除的记录,row为删除的记录所在的行, 最后一个参数是 grid对象本身.
对于上面提到的事件, 仅仅有这些简短的文字说明,也许大家无法完全理解,
建议大家可以动手试一试, 为grid指定上述事件, 然后在事件里进行 alert ,好好体会一下这些事件触发的时机.
=========================================
下面将结合一个示例,来为大家演示如何利用事件来强化列表.
我们假设这样一个场景: 选中列表中的某一行,然后将这一行对应的记录添加到列表下方的一个表单内.
首先我们在列表的下方加入一个极其简单的form:
<form> 学 号 : <input type="text" id="no" name="no" /> <br/> 姓 名 : <input type="text" id="name" name="name" /> <br/> 年 龄 : <input type="text" id="age" name="age" /> <br/> 性 别 : <input type="text" id="gender" name="gender" /> <br/> 英 语 : <input type="text" id="english" name="english" /> <br/> 数 学 : <input type="text" id="math" name="math" /> <br/> 总成绩 : <input type="text" id="total" name="total" /> </form>
然后为列表指定 afterSelectRow事件.
var gridConfig={ /* ... 略去其他属性设置 ...*/ afterSelectRow : function(record ,row, rowNo,grid){ for (var k in record) { var field=GT.$(k); if (field) { field.value=record[k]; } } } }
运行一下就可以看到效果了. afterSelectRow 对应函数内的具体代码大家不必关注.
大家要在意的是 这个事件触发的时机 ---- 选中某行之后.
以及 事件的参数 : record ---- 选中行对应的记录.
合理的使用该函数,可以比较轻松的实现主从表 列表与其他组件联动等效果.
=========================================
下面我们再举一个例子. 假设这样一个场景: 在编辑数据时,对于性别未知的同学,我们不允许编辑其数据.
那么我们可以利用 beforeXXXX 类事件的拦截机制来实现.
var gridConfig={ /* ... 略去其他属性设置 ...*/ beforeEdit : function(value,record,columnObj,grid){ if ('U'==record['gender']){ return false; } }, beforeDelete : function(record,row,grid){ if ('U'==record['gender']){ return false; } } }
现在运行一下示例, 在点击 性别为"未知"的学生时, 我们无法进入编辑状态,也无法删除之.
=========================================
在诸多事件中, beforeLoad 和 beforeSave.这两个事件需要特别说一下.
之所以要特别提一下它们,是因为这两个事件处在 客户端与服务端通讯的关键路径上.
它们的第一个参数就是 GT-Grid要发送给服务端的数据.
开发人员可以在这两个事件中, 对提交的数据进行个性化处理(改变/增加/删除提交的数据)
同时也可以利用return false 来阻止load/save操作,
甚至也可以在这两个事件里alert出提交的数据内容,来帮助自己调试程序.
在这里只举一个简单的例子,
var gridConfig={ /* ... 略去其他属性设置 ...*/ beforeSave : function(reqParam,grid){ return confirm("您确定要提交如下数据到 "+grid.saveURL + " 吗?\n "+GT.$json(reqParam,true)+"\n"); } }
这个示例中, 用户在点击"save"按钮时,将会弹出提示信息,询问用户确实要提交数据吗,
点击确定 将会提交, 点击取消 将什么都不做.
代码 : GT.$json(reqParam,true)
用来生成 提交参数的JSON串(第二个参数为是否是格式化输出), 可用来实现对提交数据的监控.
=========================================
关于GT-Grid的事件就先讲到这里, 事件其实是个很灵活的机制, 只要合理的利用,并且发挥自己的想象力, 可以扩展出很多GT-Grid本身不具备的功能.
好了 本章就暂时说这些吧. 下一章见.
发表评论
-
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 1804GT-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:08 1072教程说明: 这是一个告 ... -
GT-Grid 1.0 基础教程(八)
2009-12-23 16:07 1056教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
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提供详尽的官方文档和...