我想在指定列添加点击事件
时间: 2024-02-25 09:51:48 浏览: 15
如果你只想在 jqGrid 中的指定列上添加点击事件,可以使用 `onCellSelect` 事件配合 `colModel` 的 `cellattr` 属性来实现。
`cellattr` 属性可以让你在单元格上添加额外的属性,例如 `class` 或 `data-*`,从而让你可以在单元格上添加点击事件等。
以下是一个示例代码,演示了如何在 `name` 列上添加单击事件:
```javascript
$("#grid").jqGrid({
url: 'data.json',
datatype: "json",
colModel: [
{ name: 'id', index: 'id', width: 55 },
{ name: 'name', index: 'name', width: 90, cellattr: function(rowId, val, rawObject, cm, rdata) {
// 给 name 列的单元格添加 class 和 data-* 属性
return `class="name-cell" data-name="${val}"`;
} },
{ name: 'age', index: 'age', width: 80, align: "right" },
{ name: 'city', index: 'city', width: 80 }
],
onCellSelect: function(rowid, iCol, cellcontent, e) {
// 当选中单元格时触发
if (iCol === 1 && $(e.target).hasClass('name-cell')) {
// 如果选中的单元格是 name 列的单元格
const name = $(e.target).data('name');
console.log(`选中了名字为 ${name} 的单元格`);
}
}
});
```
在上面的示例代码中,我们在 `name` 列的单元格上添加了 `class="name-cell"` 和 `data-name="${val}"` 属性,其中 `${val}` 是该单元格的值。然后在 `onCellSelect` 事件中,我们判断选中的单元格是否是 `name` 列的单元格,并且是否具有 `name-cell` 的类名。如果是,就可以读取该单元格的 `data-name` 属性,从而获取到该行的名字信息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)