jqgrid可以在工具栏过滤字段中支持下拉菜单吗 [英] can jqgrid support dropdowns in the toolbar filter fields

问题描述

我正在使用 jqgrid 和工具栏过滤器.默认情况下，它只是给你一个文本框来输入数据.它是否支持下拉选择组合框，我可以在其中给它一个值列表以供他们选择过滤??

i am using jqgrid and the toolbar filter. by default its just gives you a textbox to enter data into. Does it support a dropdown select combobox where i can give it a list of values to choose from to them filter on ??

推荐答案

有一些jqGrid中所有类型排序的通用规则

{
    name: 'Category', index: 'Category', width: 200, formatter:'select', 
    stype: 'select', searchoptions:{ sopt:['eq'], value: categoriesStr }
}

其中 categoriesStr 定义为

var categoriesStr = ":All;1:sport;2:science";

除了标准的1:sport;2:science"值之外，这里还插入了:All"字符串，它允许您不过滤列.你当然可以使用 ":" 或 ":Select..." 等等.

Here additionally to the standard "1:sport;2:science" values are inserted ":All" string which allow you don't filter the the column. You can of course use ":" or ":Select..." and so on.

在 演示上为 答案可以看到关闭结果.

On the demo prepared for the answer you can see the close results.

已更新:我发现您的问题很有趣，并且使 演示.它展示了如何构建选择组合框，这些组合框可用于搜索工具栏或高级搜索对话框中基于相应列的文本包含.对于一列，我另外使用 jQuery UI 自动完成.您可以修改代码以使用更多不同的强大的自动完成选项.下面是代码的代码:

UPDATED: I find your question interesting and made the demo. It shows how one can build the select comboboxes which can be used in the search toolbar or in the advanced searching dialog based on the text contain of the corresponding column. For one column I use additionally jQuery UI autocomplete. You can modify the code to use more different powerful options of the autocomplete. Here is the code of the code:

var mydata = [
        {id:"1", Name:"Miroslav Klose",     Category:"sport",   Subcategory:"football"},
        {id:"2", Name:"Michael Schumacher", Category:"sport",   Subcategory:"formula 1"},
        {id:"3", Name:"Albert Einstein",    Category:"science", Subcategory:"physics"},
        {id:"4", Name:"Blaise Pascal",      Category:"science", Subcategory:"mathematics"}
    ],
    grid = $("#list"),
    getUniqueNames = function(columnName) {
        var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [],
            textsLength = texts.length, text, textsMap = {}, i;
        for (i=0;i<textsLength;i++) {
            text = texts[i];
            if (text !== undefined && textsMap[text] === undefined) {
                // to test whether the texts is unique we place it in the map.
                textsMap[text] = true;
                uniqueTexts.push(text);
            }
        }
        return uniqueTexts;
    },
    buildSearchSelect = function(uniqueNames) {
        var values=":All";
        $.each (uniqueNames, function() {
            values += ";" + this + ":" + this;
        });
        return values;
    },
    setSearchSelect = function(columnName) {
        grid.jqGrid('setColProp', columnName,
                    {
                        stype: 'select',
                        searchoptions: {
                            value:buildSearchSelect(getUniqueNames(columnName)),
                            sopt:['eq']
                        }
                    }
        );
    };

grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name:'Name', index:'Name', width:200 },
        { name:'Category', index:'Category', width:200 },
        { name:'Subcategory', index:'Subcategory', width:200 }
    ],
    sortname: 'Name',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    ignoreCase: true,
    pager: '#pager',
    height: "auto",
    caption: "How to use filterToolbar better locally"
}).jqGrid('navGrid','#pager',
          {edit:false, add:false, del:false, search:false, refresh:false});

setSearchSelect('Category');
setSearchSelect('Subcategory');

grid.jqGrid('setColProp', 'Name',
            {
                searchoptions: {
                    sopt:['cn'],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source:getUniqueNames('Name'),
                            delay:0,
                            minLength:0
                        });
                    }
                }
            });

grid.jqGrid('filterToolbar',
            {stringResult:true, searchOnEnter:true, defaultSearch:"cn"});

这是你想要的吗?

更新:另一种选择可能是使用 select2 插件它结合了自动完成的下拉和舒适搜索的优点.请参阅答案和这个(参见演示)用于演示 (这个和这个)和代码示例.

UPDATED: One more option could be the usage of select2 plugin which combines the advantages of dropdown and comfortable searching by Autocomplete. See the answer and this one (see the demo) for demos (this one and this one) and code examples.

更新 2:答案 包含对上述代码的修改，以使用 jqGrid 4.6/4.7 或 免费 jqGrid 4.8.

UPDATED 2: The answer contains the modification of above code to work with jqGrid 4.6/4.7 or with free jqGrid 4.8.

这篇关于jqgrid可以在工具栏过滤字段中支持下拉菜单吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！