jqGrid中的事件

jqGrid中的事件:

语法:

Java代码
1.var lastSel;
2.jQuery("#gridid").jqGrid({
3....
4. onSelectRow: function(id){
5. if(id && id!==lastSel){
6. jQuery('#gridid').restoreRow(lastSel);
7. lastSel=id;
8. }
9. jQuery('#gridid').editRow(id, true);
10. },
11....
12.});
var lastSel;
jQuery("#gridid").jqGrid({
...
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery('#gridid').restoreRow(lastSel);
lastSel=id;
}
jQuery('#gridid').editRow(id, true);
},
...
});


事件 参数 备注
afterInsertRow rowidrowdatarowelem 当插入每行时触发。rowid插入当前行的id;rowdata插入行的数据,格式为name: value,name为colModel中的名字
beforeRequest none 向服务器端发起请求之前触发此事件但如果datatype是一个function时例外
beforeSelectRow rowid, e 当用户点击当前行在未选择此行时触发。rowid:此行id;e:事件对象。返回值为ture或者false。如果返回true则选择完成,如果返回false则不会选择此行也不会触发其他事件
gridComplete none 当表格所有数据都加载完成而且其他的处理也都完成时触发此事件,排序,翻页同样也会触发此事件
loadComplete xhr 当从服务器返回响应时执行,xhr:XMLHttpRequest 对象
loadError xhr,status,error 如果请求服务器失败则调用此方法。xhr:XMLHttpRequest 对象;satus:错误类型,字符串类型;error:exception对象
onCellSelect rowid,iCol,cellcontent,e 当点击单元格时触发。rowid:当前行id;iCol:当前单元格索引;cellContent:当前单元格内容;e:event对象
ondblClickRow rowid,iRow,iCol,e 双击行时触发。rowid:当前行id;iRow:当前行索引位置;iCol:当前单元格位置索引;e:event对象
onHeaderClick gridstate 当点击显示/隐藏表格的那个按钮时触发;gridstate:表格状态,可选值:visible or hidden
onPaging pgButton 点击翻页按钮填充数据之前触发此事件,同样当输入页码跳转页面时也会触发此事件
onRightClickRow rowid,iRow,iCol,e 在行上右击鼠标时触发此事件。rowid:当前行id;iRow:当前行位置索引;iCol:当前单元格位置索引;e:event对象。此事件不支持opera游览器
onSelectAll aRowids,status multiselect为ture,且点击头部的checkbox时才会触发此事件。aRowids:所有选中行的id集合,为一个数组。status:boolean变量说明checkbox的选择状态,true选中false不选中。无论checkbox是否选择,aRowids始终有值
onSelectRow rowid,status 当选择行时触发此事件。rowid:当前行id;status:选择状态,当multiselect 为true时此参数才可用
onSortCol index,iCol,sortorder 当点击排序列但是数据还未进行变化时触发此事件。index:name在colModel中位置索引;iCol:当前单元格位置索引;sortorder:排序状态:desc或者asc
resizeStart event, index 当开始改变一个列宽度时触发此事件。event:event对象;index:当前列在colModel中位置索引
resizeStop newwidth, index 当列宽度改变之后触发此事件。newwidth:列改变后的宽度;index:当前列在colModel中的位置索引
serializeGridData postData 向服务器发起请求时会把数据进行序列化,用户自定义数据也可以被提交到服务器端
### 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` 钩子完成更加精细的操作需求。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值