jqGrid搜索操作符不显示工具栏过滤器

Question

我按照http://www.trirand.com/blog/jqgrid/jqgrid.html "搜索|带有操作符的工具栏"下的示例，使用下面的示例代码。

该代码(据我所知)与给出的jqGrid示例代码相同，只是数据源不同。

问题是我无法使工具栏过滤器操作符显示出来。过滤器工具栏本身确实存在，并按预期功能运行。

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

<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属性将是最好的选择。