bootstrap jqgrid 操作一列 添加删除按钮
时间: 2023-08-04 10:04:30 浏览: 64
可以使用 jqGrid 自带的 formatter 属性来实现操作列。首先,在 colModel 中定义操作列的属性,如下:
```
{
name: 'operation',
index: 'operation',
width: 80,
sortable: false,
formatter: function(_, options, row) {
var editBtn = '<button type="button" class="btn btn-xs btn-default editBtn" data-rowid="' + options.rowId + '">编辑</button>';
var delBtn = '<button type="button" class="btn btn-xs btn-danger delBtn" data-rowid="' + options.rowId + '">删除</button>';
return editBtn + ' ' + delBtn;
}
}
```
其中,formatter 函数会接收三个参数:
1. `_`: 无意义
2. `options`: 当前单元格的一些属性,包括 rowId(行 ID)、colModel(列模型)、pos(当前单元格的左上角坐标)等等
3. `row`: 当前行的数据对象
在 formatter 中,我们可以根据 options 和 row 的值来自定义单元格的显示内容,返回一个 HTML 字符串即可。
然后,在 gridComplete 事件中为操作列的按钮绑定事件,如下:
```
gridComplete: function() {
var $grid = $(this);
// 编辑按钮点击事件
$grid.find('.editBtn').on('click', function() {
var rowId = $(this).data('rowid');
var rowData = $grid.jqGrid('getRowData', rowId);
// TODO:显示编辑对话框,并根据 rowData 的值填充表单
});
// 删除按钮点击事件
$grid.find('.delBtn').on('click', function() {
var rowId = $(this).data('rowid');
$grid.jqGrid('delRowData', rowId);
});
}
```
在 gridComplete 中,我们可以利用 jqGrid 对象获取当前表格的 DOM 元素,并对其中的操作按钮绑定点击事件。需要注意的是,因为 jqGrid 会对表格的 DOM 结构进行修改,所以绑定事件时需要使用 $(this) 而非常规的选择器。
以上代码就可以实现在 jqGrid 中添加删除按钮了。如果需要修改按钮样式,可以在 formatter 函数中调整 HTML 字符串;如果需要添加更多的操作按钮,可在 formatter 和 gridComplete 中添加对应的代码。
相关推荐
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.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)