jqgrid可以在工具栏过滤字段中支持下拉菜单吗

Posted 2023-02-21

【中文标题】jqgrid可以在工具栏过滤字段中支持下拉菜单吗

【英文标题】：can jqgrid support dropdowns in the toolbar filter fields

【发布时间】：2011-07-16 17:32:55

【问题描述】：

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

【参考方案1】：

在 jqGrid 中有一些 common rules 用于所有类型的排序

    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..." 等等。

在the demo准备the answer你可以看到关闭的结果。

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

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 插件，它结合了下拉和自动完成搜索的优势。有关演示（this one 和 this one）和代码示例，请参见 the answer 和 this one（参见演示）。

更新 2：The answer 包含对上述代码的修改，以便与 jqGrid 4.6/4.7 或 free jqGrid 4.8 一起使用。

【讨论】：

@Oleg - 谢谢。 .我希望网格可以从列中不同的数据集中找出下拉列表，但这很好。 .

@Oleg - 为什么所有人都有一个数字（1）而运动有一个数字（2）但科学没有？？

@ooo：让行为接近 Excel 过滤器是个好主意！我会尽力为你制作演示。

@ooo: "sport" 的数字是 1，"science" 的数字是 2，而 "All" 什么都没有，所以如果您选择“All”，则不会设置列上的过滤器。跨度>

@Oleg - 啊，我读错了。 .另外，您上面的代码似乎不在 demo 中。 .它似乎使用编辑选项而不是搜索选项中的值

【参考方案2】：

我也遇到过类似的情况。多亏了上面 Oleg 的优秀示例，它几乎解决了这个问题。我需要一点改进。我的网格是一个 loadonce 网格，大约有 40 行，每页 10 个。上面使用的 getCol 方法只返回当前页面的列值。但我想用整个数据集的唯一值填充过滤器。所以这里对函数getUniqueNames稍作修改：

var getUniqueNames = function(columnName) 

// Maybe this line could be moved outside the function           
// If the data is really huge then the entire segregation could
// be done in a single loop storing each unique column
// in a map of columnNames -> unique values
var data = grid.jqGrid('getGridParam', 'data');
var uniqueTexts = [], text, textsMap = , i;

for (i = 0; i < data.length; i++) 

                 text = data[i][columnName];

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

         // Object.keys(textsMap); Does not work with IE8: 
             return uniqueTexts;

【参考方案3】：

这是我自己做的。感觉有点像黑客，但它有效！

创建了一个新的“navButtonAdd”，并为“标题”添加了下拉菜单的 html 代码。 onclickButton 函数不包含任何内容。

然后我创建了一个 onchange 函数来处理网格在其值为值时的重新加载 改变了。

    $('#myGrid').jqGrid('navButtonAdd', '#myGrid_toppager', 
        caption: "<select id='gridFilter' onchange='ChangeGridView()'><option>Inbox</option><option>Sent Messages</option></select>",
        title: "Apply Filter",
        onClickButton: function ()                  
        
    );

    function ChangeGridView() 
        var gridViewFilter = $("#gridFilter").val();
        $('#myGrid').setGridParam( datatype: 'json', url: '../../Controller/ActionJSON', postData:  msgFilter: gridViewFilter  );
        $('#myGrid').trigger("reloadGrid"); 
    ; 

希望这会有所帮助！

【参考方案4】：

类别是列名。

loadComplete: function () 
    $("#" + TableNames).setColProp('Category', 
        formatter: 'select', edittype: "select",
        editoptions:  value: "0:MALE;1:FEMALE;2:other;" 
    );
,

【讨论】：

category 是列名