如何操作 jqGrid 的搜索/过滤器？答案

【问题标题】：How do I manipulate a jqGrid's search/filters?如何操作 jqGrid 的搜索/过滤器？
【发布时间】：2010-04-08 22:26:35
【问题描述】：

我有一个带有导航栏的 jqGrid，它有 search: true 和 multipleSearch: true。我想在我的 UI 中添加一个按钮，该按钮会自动向搜索添加一条附加规则。

我尝试直接为过滤器操作 postData，但以这种方式添加的值不会显示在搜索 UI 中。

我也尝试过使用 jQuery 直接访问搜索框，如下所示：

$('#fbox_list').searchFilter().add();
$('#fbox_list .sf .data input').each(function(index) {
    alert($(this).val());
});

但是，除了感觉 hackish 之外，它只有在用户已经点击了搜索按钮时才有效（fbox_list div 不是在加载时构建的）。

有其他人处理过这样的问题吗？

【问题讨论】：

标签： javascript jquery jqgrid

【解决方案1】：

为了后代，这是我目前正在使用的 hack。网格的 ID 为 list，寻呼机的 ID 为 pager：

jQuery(document).ready(function() {
    //Initialize grid.

    //Initialize the navigation bar (#pager)

    //Hack to force creation of the search grid.
    //The filter's ID is of the form #fbox_<gridId>
    jQuery('#pager .ui-icon-search').click();
    jQuery('#fbox_list').searchFilter().close();

    //Example button events for adding/clearing the filter.
    jQuery("#btnAddFilter").click(function() {
        //Adds a filter for the first column being equal to 'filterValue'.
        var postFilters = jQuery("#list").jqGrid('getGridParam', 'postData').filters;
        if (postFilters) {
            $('#fbox_list').searchFilter().add();
        }

        var colModel = jQuery("#list").jqGrid('getGridParam', 'colModel');
        //The index into the colModel array for the column we wish to filter.
        var colNum = 0;
        var col = colModel[colNum];

        $('#fbox_list .sf .fields select').last().val(col.index).change();
        $('#fbox_list .sf .data input').last().val('filterValue');

        $('#fbox_list .sf .ops select.field' + colNum).last().val('eq').change();

        $('#fbox_list').searchFilter().search();
    });

    jQuery("#btnClearFilter").click(function() {
        $('#fbox_list').searchFilter().reset();
    });
});

【讨论】：

非常感谢您的这篇文章。我一直在尝试找到一种在网格更新时访问 XHR URI 的方法。但是，由于 XHR 权限问题，我永远无法在我的 localhost 开发框中完成此操作。您提到“jqGrid('getGridParam', 'postData')”给了我一种自己生成 URI 的方法。再次感谢。
没有更简单的方法吗？
@Don 我发布了这个问题，希望有人能提供一个。到目前为止，我还没有看到一个有效的。当然，我已经离开 jqGrid 场景有一段时间了，所以可能已经修补了一个。

【解决方案2】：

如果您指的是过滤器工具栏，您可以这样做：（status 是 col 名称 - 因此，将“#gs_status”替换为“#gs_”+ your_col_name

        jQuery("#distributor_grid").jqGrid('showCol',['status']);           
        jQuery(".ui-search-toolbar #gs_status")
            .val('ALL')
            ;

        $('#distributor_grid').RefreshData();  // triggers toolbar

【讨论】：

嗯...也许我们的版本不匹配。当我尝试$('#<table ID>').RefreshData(); 时，我收到一个 JS 错误（方法不存在）。无论哪种方式，我将如何使用此方法设置搜索运算符（等于、不等于等）？

【解决方案3】：

清除输入、选择和重置网格

$("td#refresh_navGrid").click();

【讨论】：