jqgrid 表头inpu 搜索后,拦截 查找数据进行覆盖、
时间: 2024-03-09 11:49:19 浏览: 91
可以使用 `jqGridToolbarBeforeSearch` 函数来拦截搜索操作,并在搜索前修改搜索条件。具体实现方法如下:
1. 在 `colModel` 中定义需要搜索的列,并将 `search` 属性设置为 `true`,表示该列可搜索。
```javascript
colModel: [
{ name: 'id', search: true },
{ name: 'name', search: true },
{ name: 'age', search: true }
]
```
2. 使用 `filterToolbar` 方法创建搜索栏,并在 `beforeSearch` 回调函数中绑定 `jqGridToolbarBeforeSearch` 事件。
```javascript
$('#grid').jqGrid('filterToolbar', {
beforeSearch: function () {
// 通过 postData 获取当前搜索条件
var postData = $('#grid').jqGrid('getGridParam', 'postData');
// 在这里可以修改搜索条件
postData.id = 'newId';
postData.name = 'newName';
postData.age = 'newAge';
}
});
```
3. 在 `dataInit` 回调函数中为搜索框绑定 `jqGridToolbarBeforeSearch` 事件,并在事件回调函数中执行搜索操作。
```javascript
colModel: [
{
name: 'id',
search: true,
searchoptions: {
dataInit: function (elem) {
$(elem).on('jqGridToolbarBeforeSearch', function () {
// 在这里执行搜索操作
$('#grid').jqGrid('setGridParam', {
postData: {
id: 'newId',
name: 'newName',
age: 'newAge'
}
}).trigger('reloadGrid');
});
}
}
},
// ...
]
```
在以上实现中,`jqGridToolbarBeforeSearch` 事件被绑定到了搜索框的 `dataInit` 回调函数中,当用户点击搜索按钮时,`jqGridToolbarBeforeSearch` 事件被触发并执行搜索操作。在 `jqGridToolbarBeforeSearch` 事件回调函数中,可以通过 `postData` 获取当前搜索条件,并在其中修改搜索条件。修改后的搜索条件会在搜索操作中被使用,从而实现了拦截搜索操作并覆盖搜索条件的功能。
阅读全文