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"
});

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

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

1 个答案: