Jquery jqGrid：带全局搜索的多词搜索

使用phpGrid，我创建了一个带有大量定制的网格，包括一个类似于Oleg示例的全局搜索：

现在，我正在尝试用全局搜索实现多词搜索（例如），但一直无法使其正常工作。提交多个单词（即三色鼠梗）时应搜索所有这些单词。提交多个引号中的单词（即“鼠梗”）应搜索准确的词

请注意，我还没有实现突出显示的搜索词，但我确实计划这样做

代码段：

    // Add global search
$("#data_toppager_center table tbody tr").append($("<td><div class=\"fieldcontainer\"><input type=\"text\" name=\"gs\" id=\"gs\" class=\"searchfield\" placeholder=\"Keywords...\" tabindex=\"1\"><input type=\"submit\" name=\"gsbtn\" id=\"gsbtn\" value=\"\"></div></td>"));

var $grid = $("#data"); 
$("#gs").keypress(function (e) {
    var key = e.charCode || e.keyCode || 0;
    if (key === $.ui.keyCode.ENTER) { // 13
        $("#gsbtn").click();
    }
});
$("#gsbtn").button({
    text: false
}).click(function () {
    var postData = $grid.jqGrid("getGridParam", "postData"),
    colModel = $grid.jqGrid("getGridParam", "colModel"),
    rules = [],
    searchText = $("#gs").val(),
    l = colModel.length,
    i,
    cm;
    for (i = 0; i < l; i++) {
        cm = colModel[i];
        if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
            rules.push({
                field: cm.name,
                op: "cn",
                data: searchText
            });
        }
    }
    postData.filters = JSON.stringify({
        groupOp: "OR",
        rules: rules
    });
    $grid.jqGrid("setGridParam", { search: true });
    $grid.trigger("reloadGrid", [{page: 1, current: true}]);
    return false;
});

//添加全局搜索
$（“#数据TopPage_CenterTable tbody tr”）。追加（$（“”）；
var$grid=$（“#数据”）；
$（“#gs”）。按键（功能（e）{
var key=e.charCode | | e.keyCode | | 0；
如果（key==$.ui.keyCode.ENTER）{//13
$（“#gsbtn”）。单击（）；
}
});
$（“#gsbtn”）。按钮({
文本：false
})。单击（函数（）{
var postData=$grid.jqGrid（“getGridParam”、“postData”），
colModel=$grid.jqGrid（“getGridParam”，“colModel”），
规则=[]，
searchText=$（“#gs”）.val（），
l=colModel.length，
我
厘米
对于（i=0；i

我认为可以相对容易地将我之前建议的两种解决方案结合起来。允许对多字文本（多个值除以空格分隔符）进行全局搜索（在任何可搜索列中搜索）：

或

我在演示中使用的完整代码如下：

$(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: "d-M-Y" },
                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($("<div><label for=\"globalSearchText\">Global search in grid for:&nbsp;</label><input id=\"globalSearchText\" type=\"text\"></input>&nbsp;<button id=\"globalSearch\" type=\"button\">Search</button></div>"));
    $("#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;
    });
});

$（函数（）{
“严格使用”；
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”，注：“3note2”，金额：“300.00”，税：“20.00”，关闭：假，通过“FE”发货，总计：“320.00”}，
{id:“3”，invdate:“2007-09-01”，name:“test3”，注：“3note3”，金额：“400.00”，税：“30.00”，关闭：假，通过“FE”发货，总计：“430.00”}，
{id:“4”，invdate:“2007-10-14”，name:“test4”，注：“3note4”，金额：“200.00”，税：“10.00”，结清：真，通过“TN”发货，总计：“210.00”}，
{id:“5”，invdate:“2007-10-31”，name:“test5”，note5，amount:“300.00”，tax:“20.00”，closed:false，ship_via:“FE”，total:“320.00”}，
{id:“6”，invdate:“2007-09-06”，name:“test6”，note6，amount:“400.00”，tax:“30.00”，closed:false，ship_via:“FE”，total:“430.00”}，
{id:“7”，invdate:“2007-10-04”，name:“test7”，note7，amount:“200.00”，tax:“10.00”，closed:true，ship_via:“TN”，total:“210.00”}，
{id:“8”，invdate:“2007-10-03”，name:“test8”，note8，amount:“300.00”，tax:“20.00”，closed:false，ship_via:“FE”，total:“320.00”}，
{id:“9”，invdate:“2007-09-22”，name:“test9”，note9，amount:“400.00”，tax:“30.00”，closed:false，ship_via:“TN”，total:“430.00”}，
{id:“10”，invdate:“2007-09-08”，name:“test10”，注：“3note10”，金额：“500.00”，税款：“30.00”，结案：真，通过“TN”发货，总计：“530.00”}，
{id:“11”，invdate:“2007-09-28”，name:“test11”，注：“3note11”，金额：“500.00”，税款：“30.00”，关闭：假，通过“FE”发货，总计：“530.00”}，
{id:“12”，invdate:“2007-09-10”，name:“test12”，注：“3note12”，金额：“500.00”，税款：“30.00”，关闭：假，通过“FE”发货，总计：“530.00”}
],
$grid=$（“#列表”），
initDatepicker=函数（elem）{
$（元素）.日期选择器({
//日期格式：“dd-M-yy”，
自动调整大小：正确，
变化年：是的，
变化月：对，
showButtonPanel：是的，
《秀周刊》：没错
});
},
numberTemplate={formatter:“number”，align:“right”，sorttype:“number”，
editrules:{number:true，required:true}，
搜索选项：{sopt:[“eq”、“ne”、“lt”、“le”、“gt”、“ge”、“nu”、“nn”、“in”、“ni”]}，
HighlightFilteredata=函数（）{
var$self=$（this），过滤器，i，l，规则，规则，iCol，
isFiltered=$self.jqGrid（“getGridParam”，“search”），
postData=$self.jqGrid（“getGridParam”、“postData”），
colModel=$self.jqGrid（“getGridParam”，“colModel”），
colIndexByName={}；
//验证是否有突出显示的输入
如果（！isFiltered | | typeof postData！=“object”）{
返回；
}
filters=$.parseJSON（postData.filters）；
如果（filters==null | | | | filters.rules==null | | | filters.rules.length谢谢你，Oleg。使用你的例子，我已经实现了多词搜索和关键字突出显示，并且正在工作。但是，这段代码似乎不支持第二个要求：在引号中提交多个词（例如“老鼠梗”）应该搜索准确的术语。我遗漏了什么吗？@sheldonbeswift:请参阅我答案的更新部分。我有一个新的挑战-我添加了一个“导出到Excel”选项，它在使用高级搜索和集成搜索时非常有效，但在使用全局搜索时效果不佳，因为它会创建一个非常长且格式不正确的请求字符串（例如/export.php？dt=json&gn=orgvdc&export\u type=EXCEL&u search=true&nd=1398191649622&rows=25&page=1&sidx=Org\u Site&sord=asc&filters=***%7B“组作业”%3A“或”%2C“规则”%3A%5B%7B“字段”%3A“ID