jqGrid searchOperators没有显示工具栏过滤器

Question

我按照http://www.trirand.com/blog/jqgrid/jqgrid.html “搜索 | 带有运算符的工具栏” 下的示例进行操作，示例代码如下。

代码（据我所知）与给出的 jqGrid 示例代码相同，但数据源除外。

问题是我无法让工具栏过滤器 Operators 显示出来。 过滤器工具栏本身确实存在并且按预期运行。

下面的代码是自给自足的，可以从本地文件加载到浏览器中。

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/jquery.jqGrid.min.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
        var myData = [
                {item_id:"1", item:"test",  item_cd:"note"   },
                {item_id:"2", item:"test2", item_cd:"note2"  },
                {item_id:"3", item:"test3", item_cd:"note3"  },
                {item_id:"4", item:"test4", item_cd:"note4"  },
                {item_id:"5", item:"test5", item_cd:"note5"  },
                {item_id:"6", item:"test6", item_cd:"note6"  },
                {item_id:"7", item:"test7", item_cd:"note7"  },
                {item_id:"8", item:"test8", item_cd:"note8"  },
                {item_id:"9", item:"test9", item_cd:"note9"  },
                {item_id:"10",item:"test10",item_cd:"note10" },
                {item_id:"11",item:"test11",item_cd:"note11" },
                {item_id:"12",item:"test12",item_cd:"note12" }
            ],

        myGrid = $("#list451");

        myGrid.jqGrid({
            datatype:'local',
            data: myData,
            height: 255,
            width: 600,
            colNames:['Index','Name', 'Code'],
            colModel:[
                {name:'item_id',index:'item_id', width:65,  sorttype:'integer', searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
                {name:'item',index:'item', width:150, sorttype:'string', searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}},
                {name:'item_cd',index:'item_cd', width:100}
            ],
            rowNum:50,
            rowTotal: 200,
            rowList : [20,30,50],
            loadonce:true,
            //mtype: "GET",
            rownumbers: true,
            rownumWidth: 40,
            gridview: true,
            pager: '#pager451',
            sortname: 'item_id',
            viewrecords: true,
            sortorder: "asc",
            caption: "Loading data from server at once"
        });
        myGrid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});
        jQuery("#list451").jqGrid('filterToolbar',{searchOperators : true});
    });
</script>

HTML 代码：

<table id="list451"><tr><td/></tr></table>
<div id="pager451"></div>

Answer 1

您的错误存在是因为您使用 两个 单独调用 filterToolbar 而不是使用 一个 调用带有附加选项 searchOperators: true：

myGrid.jqGrid("filterToolbar", {
    searchOperators: true,
    stringResult: true,
    searchOnEnter: false,
    defaultSearch: "cn"
});

我建议您另外从所有 colModel 项目中删除 index 属性。我想您将使用datatype: "json" 的原始代码更改为datatype: "local" 仅用于演示问题。您使用loadonce: true，因此index 属性的值必须与name 属性的值相同。因此删除index 属性将是最佳选择。