*jqGrid事件字典

事件参数描述
afterInsertRowrowid 
rowdata 
rowelem
此事件发生在每次插入行后
rowid 为插入的行ID
rowdata 是被插入行的数据数组。格式为name:value对,name在colModel定义
rowelem 是应答元素。xml为xml行,json为所有行数据。
注意:若gridview 为true,此事件不会发生
beforeRequestnone此事件发生在任何数据请求前,但当datatype为function时不发生。
beforeSelectRowrowid, e此事件发生在用户点击行,选中该行前。
rowid 为行的ID,e为事件对象
该事件将返回布尔值true(行被选中)或false(行未被选中)。
gridCompletenone此事件发生在表格所有数据装入和进程完成后。与datatype参数及排序分页等无关。
loadBeforeSendxhr,
settings
此事件发生在XMLHttpRequest被发送前,用于修改对象属性(如headers)。xhr 为XMLHttpRequest对象。
loadCompletedata此事件发生在每个服务器请求后。xhr 为XMLHttpRequest对象。
loadErrorxhr,
status,
error
此事件在请求失败时发生。事件有3个参数:
xhr 为XMLHttpRequest对象;
Satus 为错误类型描述;error 为错误对象。
onCellSelectrowid,
iCol, 
cellcontent,
e
此事件在点击表格特定单元格时发生。
rowid 为行ID;iCol 为列索引;
cellcontent 为单元格中内容;
e 点击事件对象。
ondblClickRowrowid, 
iRow, 
iCol, 
e
此事件发生在行双击后发生。
rowid为行ID;iRow 为行索引(勿与rowid混淆);
iCol为列索引;
e 为事件对象。
onHeaderClickgridstate此事件发生在点击显示或隐藏表格后发生(hidegrid为true)gridstate为表格状态,有visible和hidden两个值
onPagingpgButton此事件发生在点击page button后,填充数据前,及用户输入一个与当前页页码不同的新页码并回车时。
onRightClickRowrowid, 
iRow, 
iCol, 
e
此事件发生在右击行后。(此事件在Opera浏览器中无效)
rowid为行ID;iRow为行索引(勿与rowid混淆)
iCol为列索引;
e为事件对象
onSelectAllaRowids,
status
此事件发生在点击标题的复选框时发生(multiselect为true)
aRowids 选定行ID的数组(哪些行的复选框与头复选框相同)
status 头复选框的选定的布尔值,true为选中,false为
onSelectRowrowid,
status
此事件发生在行点击后
rowid 为行ID;
status  为选择状态。当multiselect为true时使用,当行被选中时返回true;为选中时返回false。
onSortColindex,
iCol,
sortorder
此事件发生在列排序被点击之后,数据排序前
index 为colModel 中定义的索引名iCol 为列的索引号
sortorder 为新的排序方式,asc或desc
resizeStartevent, index此事件发生在列被重新定义宽度时。event 为事件对象;index 为在colModel 中定义的列索引。
resizeStopnewwidth, index此事件发生在列被重新定义宽度后。
newwidth 为新的列宽度;index 为在colModel 中定义的列索引。
serializeGridDatapostData通过此事件可以序列化传递给ajax请求的的数据。此事件将返回一个以序列化的数据。若有自定义的数据(如JSON字符串、XML字符串)要发给服务器时,可使用该事件。
### jqGrid 中单元格事件的实现方法 在 `jqGrid` 表格中,可以通过绑定特定的事件来处理单元格的点击或其他交互行为。以下是详细的说明: #### 绑定单元格点击事件 可以利用 jQuery 的 `.on()` 方法监听表格中的单元格点击事件。通过获取当前选中的行 ID 和列名,能够进一步操作该单元格的数据。 ```javascript // 监听单元格点击事件 $("#gridTable").on("click", "td", function(e) { var rowId = $(this).closest("tr.jqgrow").attr("id"); // 获取行ID var colName = $("#gridTable").jqGrid('getGridParam', 'colModel')[e.target.cellIndex].name; // 获取列名 console.log(`Clicked on cell with Row ID: ${rowId}, Column Name: ${colName}`); }); ``` 上述代码实现了当用户单击某个单元格时触发回调函数,并打印出对应的行 ID 和列名称[^1]。 --- #### 使用 `beforeSelectRow` 或 `onCellSelect` 处理单元格事件 除了手动绑定事件外,还可以使用 `jqGrid` 提供的内置事件处理器来捕获单元格级别的交互。 ##### 1. **`onCellSelect`**事件会在用户点击任意单元格时被触发,参数包括行 ID、列索引、单元格内容以及事件对象。 ```javascript $("#gridTable").jqGrid({ url: 'your_data_url', datatype: "json", colNames: ['Column1', 'Column2'], colModel: [ { name: 'column1', index: 'column1' }, { name: 'column2', index: 'column2' } ], onCellSelect: function(rowId, columnIndex, cellContent, e) { alert(`You clicked a cell at Row ID: ${rowId} and Column Index: ${columnIndex}. Cell Content is "${cellContent}"`); } }); ``` 此处展示了如何定义 `onCellSelect` 来响应用户的单元格点击动作[^2]。 ##### 2. **`beforeSelectRow`** 如果希望更早地拦截到行的选择过程,则可采用 `beforeSelectRow`。它允许开发者决定是否继续默认的行为(如高亮整行),并能访问具体的单元格信息。 ```javascript $("#gridTable").jqGrid({ beforeSelectRow: function(rowId, e) { var $target = $(e.target), colName; if ($target.is("td")) { colName = $("#gridTable").jqGrid('getGridParam', 'colModel')[$target.index()].name; alert(`Before selecting the row, you clicked column named "${colName}".`); } return true; // 返回true表示允许正常选择行;返回false则阻止 } }); ``` 这段脚本解释了怎样借助 `beforeSelectRow` 实现对单元格级别互动的控制。 --- ### 总结 以上介绍了三种方式用于捕捉和管理 `jqGrid` 单元格内的用户活动:直接运用 jQuery 的 `.on()` 函数绑定自定义逻辑;或者依赖于框架自带的 `onCellSelect` 及 `beforeSelectRow` 钩子完成更加精细的操作需求。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值