我正在尝试在jQGrid中对自定义格式化列进行编程搜索，但它无法正常工作。这是我的代码。我刚刚从不同的互联网资源编译了这段代码，所以如果有人找到他们写的代码，请不要误会我的意思。
在下面的代码段中，自定义格式列是delCol，但使用该列进行搜索不起作用。
$(document).ready(function () {
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Tom" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Jerry" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Dog" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Cat" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Mouse" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Keller" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Jekyll" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Hyde" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Superman" },
{ id: "10", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Spiderman" },
{ id: "11", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "He-man" },
{ id: "12", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Cat" },
{ id: "13", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Bat" },
{ id: "14", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Rat" },
{ id: "15", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Pat" },
{ id: "16", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Gate" },
{ id: "17", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Claw" },
{ id: "18", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Jerry" }
],
getColumnIndexByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel');
for (var i = 0, l = cm.length; i < l; i++) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
grid = $('#list'), firstButtonColumnIndex, buttonNames = {};
grid.jqGrid({
data: mydata,
loadonce: true,
datatype: 'local',
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes', 'Custom'],
colModel: [
{ name: 'id', index: 'id', key: true, width: 70, sorttype: "int" },
{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
{ name: 'note', index: 'note', width: 100, sortable: true },
{ name: 'delCol', width: 70, sortable: true, index: 'custText',search:true,
formatter: function (cellvalue, options, rowObject) {
return "<img src='/gr_focus.gif'/><span>" + rowObject.custText + "</span>"
},
unformat: function (cellvalue, options, cell) {
return cellvalue;
}
}
],
pager: '#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
viewrecords: true,
gridview: true,
height: '100%',
rownumbers: true,
caption: 'How to select columns',
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol >= firstButtonColumnIndex) {
alert("rowid=" + rowid + "\nButton name: " + buttonNames[iCol]);
}
// prevent row selection if one click on the button
return (iCol >= firstButtonColumnIndex) ? false : true;
}
});
firstButtonColumnIndex = getColumnIndexByName(grid, 'add');
buttonNames[firstButtonColumnIndex] = 'Add';
buttonNames[firstButtonColumnIndex + 1] = 'Edit';
buttonNames[firstButtonColumnIndex + 2] = 'Remove';
buttonNames[firstButtonColumnIndex + 3] = 'Details';
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false, refresh: false });
});
function searchGridFn() {
grid = $("#list");
var searchFiler = $("#filter").val(), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData, { filters: "" });
}
f = { groupOp: "OR", rules: [] };
f.rules.push({ field: "name", op: "cn", data: searchFiler });
f.rules.push({ field: "delCol", op: "cn", data: searchFiler });
grid[0].p.search = true;
$.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
grid.trigger("reloadGrid", [{ page: 1, current: true}]);
}
<table id="list">
</table>
<div id="pager">
</div>
<br />
<fieldset style="float: left">
<input id="filter" />
<button id="searchButton" onclick="searchGridFn()">
Search</button>
</fieldset>
<br />
<br />
<button style="clear: left" id="sortGridButton" onclick="sortGridFn()">
Sort Grid</button>
答案 0 :(得分：3)
我无法重现你的问题。 The demo我在哪里使用您发布的代码可以正常工作。只需在输入字段中输入3或2，然后点击“搜索”按钮。您将在网格中看到过滤的项目。
顺便说一下，您在"delCol"中不存在的过滤器中使用了colModel，因此只能通过"name"列的内容进行过滤。
更新：如果您使用datatype: 'local'（或者datatype: 'json'或datatype: 'xml'与loadonce: true一起使用），必须使用index colModel属性的值与name属性的值相同。我建议您不要指定index colModel属性。在这种情况下，index属性的值将在内部从name属性中复制。
所以你应该做的是
name: 'delCol'更改为name: 'custText'，这与您使用的输入数据相对应。index删除所有colModel个属性。"custText"而不是"delCol"（使用f.rules.push({ field: "custText", op: "cn", data: searchFiler });）。