jqGrid：全局搜索的多字搜索
使用phpGrid，我创建了一个包含许多自定义的网格，包括类似于Oleg的示例的全局搜索： jqgrid的通用搜索字段
现在，我正在尝试使用全局搜索实现多字搜索（例如JQGrid工具栏搜索：搜索列的多个单词 ），但无法使其正常工作。 提交多个单词（即三色小猎犬）应该搜索所有这些单词。 提交引号中的多个单词（即“大鼠梗”）应搜索确切的术语。
请注意，我还没有实现突出显示的搜索字词，但我确实计划。
代码段：
// Add global search $("#data_toppager_center table tbody tr").append($(" 我认为可以比较容易地结合我之前建议的两种解决方案。 生成的演示允许对多字文本进行全局搜索（在任何可搜索列中搜索）（多个值除以空格分隔符）：
要么
我在演示中使用的完整代码如下：
$(function () { "use strict"; var mydata = [ { id: "1", invdate: "2007-10-21", name: "test", note: "3note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, { id: "2", invdate: "2007-10-22", name: "test2", note: "3note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "3", invdate: "2007-09-01", name: "test3", note: "3note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, { id: "4", invdate: "2007-10-14", name: "test4", note: "3note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, { id: "5", invdate: "2007-10-31", name: "test5", note: "3note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "6", invdate: "2007-09-06", name: "test6", note: "3note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, { id: "7", invdate: "2007-10-04", name: "test7", note: "3note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, { id: "8", invdate: "2007-10-03", name: "test8", note: "3note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "9", invdate: "2007-09-22", name: "test9", note: "3note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" }, { id: "10", invdate: "2007-09-08", name: "test10", note: "3note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" }, { id: "11", invdate: "2007-09-28", name: "test11", note: "3note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }, { id: "12", invdate: "2007-09-10", name: "test12", note: "3note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" } ], $grid = $("#list"), initDatepicker = function (elem) { $(elem).datepicker({ //dateFormat: "dd-M-yy", autoSize: true, changeYear: true, changeMonth: true, showButtonPanel: true, showWeek: true }); }, numberTemplate = {formatter: "number", align: "right", sorttype: "number", editrules: {number: true, required: true}, searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }}, highlightFilteredData = function () { var $self = $(this), filters, i, l, rules, rule, iCol, isFiltered = $self.jqGrid("getGridParam", "search"), postData = $self.jqGrid("getGridParam", "postData"), colModel = $self.jqGrid("getGridParam", "colModel"), colIndexByName = {}; // validate whether we have input for highlighting if (!isFiltered || typeof postData !== "object") { return; } filters = $.parseJSON(postData.filters); if (filters == null || filters.rules == null || filters.rules.length <= 0) { return; } // fill colIndexByName which get easy column index by the column name for (i = 0, l = colModel.length; i < l; i++) { colIndexByName[colModel[i].name] = i; } rules = filters.rules; for (i = 0, l = rules.length; i < l; i++) { rule = rules[i]; iCol = colIndexByName[rule.field]; if (iCol !== undefined) { $self.find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")").highlight(rule.data); } } }; $grid.jqGrid({ datatype: "local", data: mydata, colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"], colModel: [ { name: "name", width: 65, editrules: {required: true} }, { name: "invdate", width: 80, align: "center", sorttype: "date", formatter: "date", //formatoptions: { newformat: "dMY" }, searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } }, { name: "amount", width: 75, template: numberTemplate }, { name: "tax", width: 52, template: numberTemplate }, { name: "total", width: 60, template: numberTemplate }, {name: "closed", width: 70, align: "center", formatter: "checkbox", edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}, stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } }, {name: "ship_via", width: 105, align: "center", formatter: "select", edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" }, stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:Intim" } }, { name: "note", width: 60, sortable: false, search: false, edittype: "textarea" } ], rowNum: 10, rowList: [5, 10, 20], toolbar: [true, "top"], pager: "#pager", gridview: true, rownumbers: true, autoencode: true, ignoreCase: true, sortname: "invdate", viewrecords: true, sortorder: "desc", shrinkToFit: false, height: "100%", caption: "Demonstrate how to implement global multi-word searching (with blank separator)", loadComplete: function () { highlightFilteredData.call(this); } }).jqGrid("navGrid", "#pager", {add: false, edit: false, del: false, search: false}); // fill top toolbar $('#t_' + $.jgrid.jqID($grid[0].id)) .append($(" ")); $("#globalSearchText").keypress(function (e) { var key = e.charCode || e.keyCode || 0; if (key === $.ui.keyCode.ENTER) { // 13 $("#globalSearch").click(); } }); $("#globalSearch").button({ icons: { primary: "ui-icon-search" }, text: false }).click(function () { var postData = $grid.jqGrid("getGridParam", "postData"), colModel = $grid.jqGrid("getGridParam", "colModel"), rules = [], searchText = $("#globalSearchText").val(), l = colModel.length, separator = ' ', searchTextParts = $.trim(searchText).split(separator), cnParts = searchTextParts.length, i, iPart, cm; for (i = 0; i < l; i++) { cm = colModel[i]; if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) { for (iPart = 0; iPart < cnParts; iPart++) { rules.push({ field: cm.name, op: "cn", data: searchTextParts[iPart] }); } } } postData.filters = JSON.stringify({ groupOp: "OR", rules: rules }); $grid.jqGrid("setGridParam", { search: true }); $grid.trigger("reloadGrid", [{page: 1, current: true}]); return false; }); });
更新 ：要允许在全局搜索字符串中使用带空格的带引号的字符串，可以使用match而不是split 。 修改后的演示允许使用以下内容
