jqGrid过滤器工具栏显示没有搜索键的记录答案

【问题标题】：jqGrid Filter toolbar displays records that does not have search keyjqGrid过滤器工具栏显示没有搜索键的记录
【发布时间】：2017-01-27 17:34:10
【问题描述】：

我有以下带有过滤器工具栏的 jqGrid。过滤正在工作。但是当我在名字搜索栏中输入“N”时，它列出的记录中没有“N”。这显示在下面的屏幕截图中。我们该如何解决这个问题？

Fiddle

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>



    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function () {
            var myData = [

                { "id": "35", "firstname": null, "codeval": "G", "note": "xx7866", "amount": "23" },
                { "id": "73", "firstname": null, "codeval": "W", "note": "dd1047", "amount": "34" },
                { "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323", "amount": "56" },
                { "id": "95", "firstname": "EST", "codeval": "M", "note": "gg574", "amount": "55" }
                ],

                myGrid = $("#list");

            myGrid.jqGrid({
                datatype:'local',
                data: myData,
                colNames: ['ID', 'FirstName', 'Code', 'Amount', 'Note'],
                colModel:[
                    {name:'id',index:'id',width:70,align:'center',sorttype: 'int'},
                    {name:'firstname',index:'firstname',width:80, align:'center'},
                    { name: 'codeval', index: 'codeval', width: 70 },
                    {name:'amount',index:'amount',width:100, formatter:'number', align:'right'},
                    {name:'note',index:'note',width:100,sortable:false}
                ],
                rowNum:10,
                pager: '#pager',
                gridview:true,
                ignoreCase:true,
                rownumbers:true,
                viewrecords: true,
                sortorder: 'desc',
                height: '100%'
            });
            myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });

        });
    //]]>
    </script>
</head>
<body>
    <table id="list"><tr><td/></tr></table>
    <div id="pager"></div>

</body>
</html>

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

您描述了 jqGrid 4.6 中的一个错误。

The line

phrase.push("String("+s+")");

jqGrid的代码应该是固定的，比如到下面的

phrase.push("String(" + s + " || '')");

主要问题：您使用死版的jqGrid：4.6，大约3岁。 jqGrid 现在有两个主要的分支：商业Guriddo jqGrid JS 和替代分支free jqGrid，这是我开发的。

如果您要使用当前版本的免费 jqGrid（版本 4.13.6），那么我建议您使用 jsonmap 作为解决方法

{ name: 'firstname', width: 80, align: 'center',
    jsonmap: function (item) {
        return item.firstname != null ? item.firstname : "";
     } }

查看演示：https://jsfiddle.net/OlegKi/rqab1veh/1/

当然，我修复了免费 jqGrid 最新代码中的错误（参见the commit）。您可以从GitHub 下载固定的cde。你可以在demohttps://jsfiddle.net/OlegKi/rqab1veh/3/上验证，你的代码使用GitHub上免费的jqGrid最新代码没有问题。

我在 jqGrid 4.6 中没有看到您报告的问题的任何解决方法。我可以建议您升级到免费 jqGrid 的最新代码，或者使用我之前描述的错误修复来自定义构建 jqGrid 4.6。

【讨论】：