jqgrid可以支持工具栏过滤器字段中的下拉列表

Question

我正在使用jqgrid和工具栏过滤器.默认情况下,它只是为您提供了一个输入数据的文本框.它是否支持下拉选择组合框,我可以给它一个值列表供他们选择过滤器？

Answer 1

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"字符串,允许您不过滤列.您当然可以使用":"或":选择..."等等.

在为答案准备的演示中,您可以看到结果非常接近.

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

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插件的使用,它结合了下拉菜单和自动填充功能的舒适搜索的优点.请参阅答案和本演示文稿(参见演示)以了解演示(此演示文稿和此演示文稿)和代码示例.

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