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>