`
jean7155
  • 浏览: 63187 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

jqGrid的使用笔记:5. 事件

阅读更多
1. 事件举例:
var lastSel;
jQuery("#gridid").jqGrid({
...
   onSelectRow: function(id){ 
      if(id && id!==lastSel){ 
         jQuery('#gridid').restoreRow(lastSel); 
         lastSel=id; 
      } 
      jQuery('#gridid').editRow(id, true); 
   },
...
});

以上代码中,onSelectRow就是一个事件,表示当一个行被选定时,需要自定义的操作。

2. 事件列表
事件参数描述
afterInsertRowrowid,rowdata,rowelemrowid: 输入行的id号,rowdata: 输入行的数组数据,数组形式为“类型名称:值", 名称是colModel的名称。rowelem: response返回的元素,如果是xml则是行的xml元素,或者是json(行的json数据元素)。备注:gridview = true.
beforeProcessingdata, status, xhrdata根据datatype参数值进行整合,如果datatype是json,data是javascript对象。
beforeRequestnone如果datatype=function,则不触发此事件。如果事件返回false,则request不送达服务端
beforeSelectRowrowid, erowid:行id号,e:事件对象。返回值是布尔值(true / false)。如果返回true,则行被选择,否则,行不被选择,并且不触发任何自定义的操作。
gridCompletenone
loadBeforeSendxhr,settings返回false则取消request
loadCompletedata根据datatype的参数确定返回的data.
loadErrorxhr,status,errorxhr: XMLHttpRequest对象, status: 描述错误的字符串,error:发生的错误。
onCellSelectrowid,iCol, cellcontent,erowid:行id号,iCol:cell索引号,cellcontent:cell的内容,e:点击时的事件对象。(备注:当cell编辑模式可用时引发该事件)。
ondblClickRowrowid, iRow, iCol, e双击行时触发该事件。rowid,iRow:行的索引号,iCol:cell的索引号,e:事件对象。
onHeaderClickgridstatehidegrid=true. gridstate: grid的状态:可见 / 隐藏
onPagingpgButton点击分页按钮时触发事件。如果事件返回“停止”,则可自定义分页功能。
onRightClickRowrowid, iRow, iCol, e备注:改事件不能被Opera浏览器触发。
onSelectAllaRowids,statusmultiselect=true(多选),aRowids:行id的数组,status:行头选择框状态,true被选,false未选。备注:aRowids包含所有被选或未选的id.
onSelectRow rowid,status,erowid,status:选择状态,e. 当multiselect=true时可用。true被选,false未选
onSortColindex,iCol,sortorderindex: colModel的名称索引,iCol:列索引,sortorder: asc顺序,desc倒序,如果事件返回‘停止’,则可自定义排序规则。
resizeStart event, indexevent:事件对象,index:colModel列索引。
resizeStop newwidth, indexnewwidth:列的新列宽值,index:colModel列索引
serializeGridDatapostData返回被序列的数据。当一系列数据(json,xml字符串等)需要传递给服务端时使用该方法。

其它的是Cell编辑的方法,subGrid方法等。

3. v4.3.2中的新方法:
事件参数描述
jqGridResizeStart
jqGridResizeStop
jqGridAfterInsertRow
jqGridGridCompletenone
jqGridAfterGridCompletenone
jqGridBeforeRequestnone
jqGridLoadComplete
jqGridAfterLoadComplete
jqGridSortCol
jqGridSelectAll
jqGridBeforeSelectRow
jqGridCellSelect
jqGridDblClickRow
jqGridRightClickRow
jqGridHeaderClick
jqGridSelectRow
jqGridShowHideCol
jqGridRemapColumns
jqGridKeyLeft
jqGridKeyRight
jqGridKeyEnter
jqGridKeySpace
jqGridToolbarBeforeSearchnone
reloadGrid
jqGridToolbarAfterSearchnone
jqGridToolbarBeforeClearnone
jqGridToolbarAfterClearnone
jqGridFilterBeforeShow
jqGridFilterAfterShow
jqGridFilterInitialize
jqGridFilterSearchnone
jqGridFilterResetnone
jqGridAddEditBeforeCheckValues
jqGridAddEditClickSubmit
jqGridAddEditBeforeSubmit
jqGridAddEditErrorTextFormat
jqGridAddEditAfterSubmit
jqGridAddEditAfterComplete
jqGridAddEditBeforeInitDataform, operform:jQuery对象表单,oper:操作类型,比如“添加”或“编辑”。
jqGridAddEditBeforeShowForm
jqGridAddEditAfterShowForm
jqGridAddEditInitializeForm
jqGridAddEditClickPgButtons
jqGridAddEditAfterClickPgButtons
jqGridInlineEditRow
jqGridInlineAfterSaveRow
jqGridInlineSuccessSaveRow
jqGridInlineErrorSaveRow
jqGridInlineAfterRestoreRow
jqGridBeforeEditCell
jqGridAfterEditCell
jqGridSelectCell
jqGridBeforeSaveCell
jqGridBeforeSubmitCell
jqGridAfterSubmitCell
jqGridAfterSaveCell
jqGridErrorCell
jqGridAfterRestoreCell
jqGridSubGridBeforeExpand
jqGridSubGridRowExpanded
jqGridSubGridRowColapsed
jqGridGroupingClickGroup
jqGridImportComplete


运行次序
  • beforeRequest
  • loadBeforeSend
  • serializeGridData
  • loadError (如果发生错误,则运行该方法,后面的方法不运行。如果没有错误,则跳过此方法运行后面的方法。)
  • beforeProcessing
  • gridComplete
  • loadComplete
分享到:
评论

相关推荐

    jqGrid 的使用笔记:1. 开始

    **jqGrid 使用笔记:开始** jqGrid 是一个强大的 jQuery 插件,用于创建灵活、功能丰富的数据网格。这篇笔记将引导我们逐步了解如何在项目中开始使用 jqGrid。jqGrid 提供了丰富的特性,包括数据分页、排序、过滤、...

    jquery.jqGrid.min.js 自家博客专用

    博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...

    jqGrid使用笔记.docx

    在 jqGrid 中,我们可以使用一系列方法来实现对表格数据的编辑操作。以下是关于 jqGrid 行编辑方法的详细说明: 1. **editRow**: 此方法用于将指定行切换到编辑模式。调用格式为 `editRow(rowid, keys, oneditfunc,...

    jqGrid表格内容查询读取代码.zip

    总之,这个压缩包提供了一个基础的jqGrid应用实例,适合初学者学习和理解如何在HTML5环境中集成和使用jqGrid。通过研究和修改这个示例,你可以掌握如何动态加载数据、实现搜索和排序功能,以及如何定制和美化表格。...

    jqgrid学习笔记

    5. **jqGrid 参数**: - **url**: 定义获取数据的服务器端地址。 - **datatype**: 指定从服务器返回的数据类型,如 xml、json 等。 - **mtype**: 设置 AJAX 请求的方式,通常是 POST 或 GET。 - 其他参数还包括 ...

    jqGrid学习笔记1 - - - - jqGrid英语PDF文档

    这个学习笔记主要围绕“jqGrid学习笔记1”展开,内容来源于jqGrid的英文PDF文档,结合了源码解析和实用工具的介绍。 首先,jqGrid支持多种数据源,包括JSON、XML、HTML、CSV等,这使得它能灵活地与各种后端服务进行...

    jqGrid表格数据修改删除代码.zip

    6. **事件处理**:在编辑和删除过程中,jqGrid触发多种事件,如`beforeSelectRow`、`beforeEditRow`、`beforeSaveRow`、`afterSaveRow`和`afterDeleteRow`等,你可以监听这些事件来执行自定义逻辑。 7. **AJAX通信*...

    jqgrid 简单学习笔记

    JqGrid的基础,我这里就不做介绍了,不知道的可以去看看博客园或Google,最好去看文档。先看效果图: 本Demo可以查询、修改、分组。新增、删除等一些基本功能都可以去JqGrid Demo中找到。 逻辑思路:第一次加载本...

    jqgrid4.6.zip

    "Jqgrid之onSelectRow 和onCellSelect 事件不能一起用-yellowcong_yelllowcong的专栏-CSDN博客_files"和"jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)_web开发自学-CSDN博客_files"以及"jqgrid...

    ui.jqgrid.css 自家博客专用

    博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====> Jqgrid...

    jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)

    本篇学习笔记将详细介绍如何使用jqGrid实现分页和搜索功能。 首先,要使用jqGrid,你需要在HTML页面中引入必要的CSS和JavaScript文件。这些文件包括jqGrid的样式表`ui.jqgrid.css`,jQuery库`jquery-2.0.3.min.js`...

    jqGrid 学习笔记整理——进阶篇(一 )

    jqGrid 是一个强大的 jQuery 插件,用于创建交互式的表格,具有数据检索、排序...在进阶篇中,还会涉及更复杂的功能,如自定义编辑器、行级事件处理、服务器端处理等,这些都是提升 jqGrid 应用性能和用户体验的关键。

    Java中jqGrid 学习笔记整理——进阶篇(二)

    在本篇Java中jqGrid的学习笔记整理中,我们将聚焦于jqGrid与后台Java服务的数据交互。jqGrid是一款强大的JavaScript库,用于创建动态、交互式的表格,而这里的进阶篇(二)将涉及到如何通过Java后端来提供数据支持。 ...

    jggrid资料

    3. **jqgrid学习笔记网搜和个人经验1.pdf**:作者通过网络搜集和自己的实践,整理出的学习笔记,包含了常见问题解决方案和实践经验分享,对于初学者极具参考价值。 **总结** jgGrid作为一个强大的JavaScript表格...

    jquery-1.5.2.min.js 自家博客专用

    博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...

    jquery-ui-1.7.1.custom.css 自家博客专用

    博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====> Jqgrid...

Global site tag (gtag.js) - Google Analytics