jqgrid4.6.0 表头inpu 搜索后,拦截 查找数据进行覆盖详细代码及几种实现方式
时间: 2024-03-09 19:49:37 浏览: 88
针对 jqGrid 4.6.0 版本,实现表头 input 搜索拦截查找数据进行覆盖的详细代码如下:
```javascript
// 定义 jqGrid
$("#grid").jqGrid({
url: "your_url",
datatype: "json",
colModel: [
{ name: "id", label: "ID", width: 50, key: true },
{ name: "name", label: "Name", width: 100 },
{ name: "age", label: "Age", width: 50 },
{ name: "address", label: "Address", width: 150 }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#pager",
gridview: true,
autoencode: true,
ignoreCase: true,
caption: "jqGrid Example"
});
// 获取表头搜索框绑定的事件
var oldSearch = $.fn.fmatter.search;
// 重写表头搜索框的事件
$.fn.fmatter.search = function(cellValue, options, rowData) {
var $self = $(this);
// 获取当前搜索框的值
var searchText = $self.val().trim();
// 如果搜索框的值为空,则返回原有的搜索结果
if (searchText === "") {
return oldSearch.apply(this, arguments);
}
// 获取当前搜索的字段名和比较符号
var colName = options.colModel.name;
var cmp = $self.siblings(".ui-search-oper").val();
// 构造自定义搜索条件
var customSearch = {
groupOp: "AND",
rules: [
{ field: colName, op: cmp, data: searchText }
]
};
// 获取表格的过滤条件
var postData = $self.jqGrid("getGridParam", "postData");
var filters = postData.filters;
// 如果当前搜索框的字段与之前搜索的字段不同,则直接使用自定义搜索条件
if (!filters || filters.groupOp === "OR" || filters.rules.length !== 1 || filters.rules[0].field !== colName) {
$self.jqGrid("setGridParam", { search: true, postData: { filters: JSON.stringify(customSearch) } });
return oldSearch.apply(this, arguments);
}
// 否则,合并当前搜索条件和之前搜索条件
var newFilters = {
groupOp: "AND",
rules: [
customSearch.rules[0],
filters.rules[0]
]
};
$self.jqGrid("setGridParam", { search: true, postData: { filters: JSON.stringify(newFilters) } });
// 返回原有的搜索结果
return oldSearch.apply(this, arguments);
};
```
上述代码中,我们通过重写表头搜索框的 `search` 事件来实现拦截查找数据进行覆盖的功能。具体实现步骤如下:
1. 获取表头搜索框绑定的事件,保存为 `oldSearch` 变量。
2. 重写表头搜索框的 `search` 事件,获取当前搜索框的值、当前搜索的字段名和比较符号。
3. 根据当前搜索框的值、搜索字段名和比较符号,构造自定义搜索条件。
4. 获取表格的过滤条件,判断当前搜索框的字段是否与之前搜索的字段相同。
5. 如果当前搜索框的字段与之前搜索的字段不同,则直接使用自定义搜索条件。
6. 否则,合并当前搜索条件和之前搜索条件,构造新的搜索条件。
7. 调用原有的搜索方法,将新的搜索条件传入。
通过上述代码,我们可以实现拦截查找数据进行覆盖的功能。如果还有其他实现方式,欢迎补充。
阅读全文