- 浏览: 2633550 次
- 性别:
- 来自: 小胖儿的大城
-
文章分类
最新评论
-
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开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第十章: 事件
这一章将讲解一下 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.toJSONString(reqParam,true)
用来生成 提交参数的JSON串(第二个参数为是否是格式化输出), 可用来实现对提交数据的监控.
=========================================
关于GT-Grid的事件就先讲到这里, 事件其实是个很灵活的机制, 只要合理的利用,并且发挥自己的想象力, 可以扩展出很多GT-Grid本身不具备的功能.
好了 本章就暂时说这些吧. 下一章见.
我想给用户一个提示,删除并非真正删除,必须要保持后才能生效。我的想法是用户第一次按删除按钮后跳alert,以后都不跳,请问应该怎么实现
这个不难吧 做个页面级的变量
然后在alert之前判断一下
教程说明:
这是一个告诉大家如何快速的利用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,rowNo,columnObj,grid,event) 该事件在点击列表区的单元格时触发 点击的单元格对应的记录值, 点击的单元格所在行对应的记录, 点击的单元格(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.toJSONString(reqParam,true)+"\n"); } }
这个示例中, 用户在点击"save"按钮时,将会弹出提示信息,询问用户确实要提交数据吗,
点击确定 将会提交, 点击取消 将什么都不做.
代码 : GT.toJSONString(reqParam,true)
用来生成 提交参数的JSON串(第二个参数为是否是格式化输出), 可用来实现对提交数据的监控.
=========================================
关于GT-Grid的事件就先讲到这里, 事件其实是个很灵活的机制, 只要合理的利用,并且发挥自己的想象力, 可以扩展出很多GT-Grid本身不具备的功能.
好了 本章就暂时说这些吧. 下一章见.
评论
5 楼
fins
2009-04-02
starnc 写道
我想给用户一个提示,删除并非真正删除,必须要保持后才能生效。我的想法是用户第一次按删除按钮后跳alert,以后都不跳,请问应该怎么实现
这个不难吧 做个页面级的变量
然后在alert之前判断一下
4 楼
starnc
2009-03-31
我想给用户一个提示,删除并非真正删除,必须要保持后才能生效。我的想法是用户第一次按删除按钮后跳alert,以后都不跳,请问应该怎么实现
3 楼
zcs_84
2009-02-13
能不能做个gt-Grid与JavaScript交互的例子呀。
最好搞个gt-Grid与ajax、jquery的交互
最好搞个gt-Grid与ajax、jquery的交互
2 楼
zcs_84
2009-02-13
能不详细说明这个时间
onClickCell : function(value,record,cell,row,rowNo,columnObj,grid,event) {
} 这些参数下面有那些属性呀
参数: row 指 单元格(td)对象,那么document.all.row.offsetHeight该是支持的吧!
但是却达不到要求呀!
onClickCell : function(value,record,cell,row,rowNo,columnObj,grid,event) {
} 这些参数下面有那些属性呀
参数: row 指 单元格(td)对象,那么document.all.row.offsetHeight该是支持的吧!
但是却达不到要求呀!
1 楼
zcs_84
2009-02-13
请问 我要单击某个单元格 得到这个单元的td的Id属性 然后设置用jquery的$("#tdId").html("<font color ="red">1111</font>");
怎么实现呀
也就是GT—Grid 通过Td的Id 来操作table
请问怎么实现呀!
怎么实现呀
也就是GT—Grid 通过Td的Id 来操作table
请问怎么实现呀!
发表评论
-
那些成天说我的GT-Grid抄袭的人注意了
2009-03-19 22:01 10355你们能够在浩瀚的网络中找到 sigmawidgets htt ... -
[发布]GT-Grid 1.42 版 ★& "前后台结合示例"★2009-01-15更新
2009-01-15 02:41 27656=============================== ... -
[发布]GT-Grid 1.36 版 ★& "前后台结合示例"★2008-12-01 12AM 更新
2008-12-01 01:27 10580(最后更新时间 :12月1日 中午12点时, 修正了 1.36 ... -
GT-Grid 近期将会发布一个bug修正版本,然后将会进行较大的重构
2008-11-11 00:12 3918GT-Grid 近期将会发布一个bug修正版本, 主要修正上一 ... -
[发布]GT-Grid 1.25 版 ★& "前后台结合示例" ★2008-10-21 更新
2008-10-21 17:25 20031首先 先道个歉. 之前许诺过 10月20日之前发布,结果迟到了 ... -
对于复杂javabean到json串的转换,建议使用FlexJSON
2008-10-16 11:23 9997gt-grid自带的那个 javaBean与json的转换工具 ... -
[通知] GT-Grid 讨论群 变更
2008-10-10 15:54 3070GT-Grid的群建立至今, 用户早已满员, 每日还有很多申请 ... -
10月中旬支持导出excel和csv的gt-grid会推出
2008-10-04 21:19 273110月中旬支持导出excel和csv的gt-grid会推出 ( ... -
[发布]GT-Grid 1.18版 & "前后台结合示例"更新 ★2008-09-12发布
2008-09-12 16:40 12764这个版本带有 与java后台结合的示例. 单独的最新版本的 ... -
调查: 关于GT-Grid导致IE崩溃的问题
2008-09-09 15:39 4337有网友反应 对GT-Grid进行操作时 会导致IE崩溃. ... -
[发布] GT-Grid 1.15 版 (080908发布) ★
2008-09-08 14:10 4278GT-Grid 1.15版 说明文档. 这篇文档主要说明一些 ... -
[发布] GT-Grid 1.12 版 (080904发布) ★
2008-09-03 11:02 5564GT-Grid 1.12版 说明文档. 这篇文档主要说明一些 ... -
奥运结束, GT启航
2008-08-25 10:11 2958前一阵由于关注奥运 GT做的工作比较少 奥运结束了 GT该再 ... -
最近奥运,GT的开发暂停一段时间,抱歉了
2008-08-18 20:13 19988月8号之后 GT的更新速度缓慢了,我回答问题也没有以前及时了 ... -
[发布] GT-Grid 1.0 奥运版 (080808发布) ★ without doc
2008-08-08 17:17 19586由于文档工作滞后 导致我本来放弃了今天发布的念头 但是还是不忍 ... -
GT-Grid 1.0 基础教程(十二)
2008-08-05 02:06 17573GT-Grid 1.0 基础教程(十二) 教程说明: 这是一 ... -
GT-Grid 1.0 基础教程(十一)
2008-08-03 22:29 8301GT-Grid 1.0 基础教程(十一 ... -
GT-Grid 1.0 基础教程(九)
2008-07-28 00:43 15720GT-Grid 1.0 基础教程(九) 教程说明: 这是一个 ... -
我的两点请求, 麻烦关注GT和ecside的朋友看一下,谢谢了
2008-07-27 21:55 30511 恳请大家以后不要通 ... -
GT-Grid 1.0 基础教程(八)
2008-07-27 01:13 15086GT-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技术下的列表组件不太熟悉的...
内容概要:本文深入剖析了安川MP7系列工业控制系统的关键源码,重点介绍了运动轨迹规划、通信协议处理以及故障处理机制等方面的技术细节。通过对实际代码片段的解读,揭示了该系统在硬件寄存器直接访问、特殊功能码处理等方面的独特之处。同时,文中还分享了一些基于实践经验得出的重要参数设置及其背后的故事,如特定摩擦补偿系数的选择原因等。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是对安川产品有一定了解并希望深入了解其内部工作机制的专业人士。 使用场景及目标:帮助读者掌握安川MP7系列控制器的工作原理,提高对类似系统的维护能力和故障排查效率。对于想要进一步研究或二次开发该系统的开发者来说,也能提供宝贵的参考资料。 其他说明:文章不仅限于理论讲解,还包括了许多来自一线的实际案例和经验教训,使读者能够更好地理解和应用所学知识。
自动化测试与脚本开发_Python3_pynput_键盘鼠标操作录制执行代码生成工具_用于自动化测试_脚本录制_重复操作模拟_宏命令生成_提高工作效率_支持GUI界面_跨平台兼容_
嵌入式八股文面试题库资料知识宝典-深入分析Windows和Linux动态库应用异同.zip
嵌入式八股文面试题库资料知识宝典-C语言总结.zip
内容概要:本文详细探讨了风储直流微电网中母线电压控制的关键技术。首先介绍了风储直流微电网的背景和发展现状,强调了母线电压控制的重要性。接着阐述了永磁风机储能并网技术,解释了永磁风机如何通过直接驱动发电机将风能转化为电能,并确保与电网的同步性和稳定性。然后深入讨论了双闭环控制MPPT技术,这是一种通过内外两个闭环控制系统来实现实时调整发电机运行参数的技术,确保风机始终处于最大功率点附近。最后,文章探讨了储能控制母线电压平衡的方法,即通过储能系统的充放电操作来维持母线电压的稳定。结论部分指出,通过这些技术的有机结合,可以实现对风储直流微电网的有效管理和优化控制。 适合人群:从事新能源技术研发的专业人士、电气工程研究人员、风电系统工程师。 使用场景及目标:适用于希望深入了解风储直流微电网母线电压控制策略的研究人员和技术人员,旨在帮助他们掌握最新的控制技术和方法,以提高系统的稳定性和效率。 其他说明:文章还对未来风储直流微电网的发展进行了展望,指出了智能化和自动化的趋势,以及储能技术的进步对系统性能的影响。
嵌入式八股文面试题库资料知识宝典-C++object-oriented.zip
内容概要:文章详细介绍了HarmonyOS的目录结构及其重要性,从整体框架到核心目录的具体功能进行了全面剖析。HarmonyOS凭借其分布式架构和跨设备协同能力迅速崛起,成为全球操作系统领域的重要力量。文章首先概述了HarmonyOS的背景和发展现状,强调了目录结构对开发的重要性。接着,具体介绍了根目录文件、AppScope、entry和oh_modules等核心目录的功能和作用。例如,AppScope作为全局资源配置中心,存放应用级的配置文件和公共资源;entry目录是应用的核心入口,负责源代码和界面开发。此外,文章还对比了HarmonyOS与Android、iOS目录结构的异同,突出了HarmonyOS的独特优势。最后,通过旅游应用和电商应用的实际案例,展示了HarmonyOS目录结构在资源管理和代码组织方面的应用效果。; 适合人群:具备一定编程基础,尤其是对移动操作系统开发感兴趣的开发者,包括初学者和有一定经验的研发人员。; 使用场景及目标:①帮助开发者快速理解HarmonyOS的目录结构,提高开发效率;②为跨设备应用开发提供理论和技术支持;③通过实际案例学习资源管理和代码组织的最佳实践。; 其他说明:HarmonyOS的目录结构设计简洁明了,模块职责划分明确,有助于开发者更好地管理和组织代码和资源。随着万物互联时代的到来,HarmonyOS有望在开发便利性和生态建设方面取得更大进展,吸引更多开发者加入其生态系统。
内容概要:本文详细介绍了飞轮储能充放电控制的Simulink仿真模型,重点在于采用永磁同步电机的矢量控制和dq轴解耦控制策略。充电时,外环控制转速,内环控制dq轴电流;放电时,外环控制直流母线电压,内环同样控制dq轴电流。文中还讨论了硬件与软件环境的选择,以及仿真模型的调试与运行情况,最终得出该模型具有良好的跟随性能和波形完美度。 适用人群:从事电力电子系统、储能技术和Simulink仿真的研究人员和技术人员。 使用场景及目标:适用于需要对飞轮储能系统进行深入研究和仿真的场合,旨在提高充放电效率和稳定性,满足不同应用场景的需求。 其他说明:该仿真模型已调试完成,可以直接用于进一步的研究和实际应用,为未来的飞轮储能技术研发提供了有价值的参考。
嵌入式八股文面试题库资料知识宝典-北京瑞德方科技.zip
嵌入式八股文面试题库资料知识宝典-同方万维硬件测试工程师.zip
1_15套python PDF格式.zip
内容概要:本文详细介绍了三相三电平整流器的仿真过程及其性能分析。文中首先概述了三相三电平整流器的基本概念及其在电力系统中的重要作用,接着重点探讨了电压电流双闭环控制方式的工作原理和优势,以及SPWM调制技术的具体应用。通过仿真文件展示了整流器在不同条件下的响应情况,验证了这两种技术的有效性和优越性。最后,作者表达了对未来实际应用的期望。 适合人群:从事电力电子研究的技术人员、高校相关专业师生、对电力控制系统感兴趣的工程爱好者。 使用场景及目标:适用于希望深入了解三相三电平整流器工作原理和技术细节的研究人员;目标是在理论基础上掌握电压电流双闭环控制和SPWM调制的实际应用方法。 其他说明:本文提供的仅为仿真文件,未涉及实物实验数据。
嵌入式八股文面试题库资料知识宝典-恒光科技.zip
嵌入式八股文面试题库资料知识宝典-北京天华威视科技有限公司面试题.zip
嵌入式八股文面试题库资料知识宝典-微软研究院笔试题目的答案.zip
Arduino UART实验例程,开发板:正点原子EPS32S3,本人主页有详细实验说明可供参考。
嵌入式八股文面试题库资料知识宝典-朝歌数码.zip
嵌入式八股文面试题库资料知识宝典-Cortex系列.zip