【问题标题】:free jqGrid - search filter and select all免费 jqGrid - 搜索过滤器并全选
【发布时间】:2016-09-26 13:03:43
【问题描述】:

我正在使用免费的 jqGrid。我希望能够在表上应用搜索过滤器,然后使用全选功能选择过滤结果中的行。然后如果过滤器被清除,仍然选择行。

这也需要在分页功能中起作用。

我已经按照question 中的答案进行了操作,不幸的是,这并没有给出所需的行为,因为“全选”只是选择当前页面上的行。

我需要用选定的行填充“selarrrow”,但如果我删除 multiPageSelection: true,此功能将停止工作。

请问我怎样才能实现上述目标?

这是我目前的代码:

$(function () {

    var selectedRows = {};

    $("#packageResults").jqGrid({
        url: '@Url.Action("GetPackages", "Package", new { id = ViewBag.ProductOfferingId })',
        datatype: "json",
        colNames: ['Id', 'Name', 'Description'],
        colModel: [
            { name: 'id', key: true, width: 55, sorttype: "int" },
            { name: 'name', width: 300, searchoptions: { "sopt": ["bw", "eq"] } },
            { name: 'description', width: 90 }                
        ],
        rowNum: 25,
        rowList: [25, 50],
        pager: true,
        toppager: true,
        sortname: 'id',
        viewrecords: true,
        guiStyle: "bootstrap",
        search: true,
        //height: "auto",
        multiPageSelection: true,
        multiselect: true,
        caption: "Packages",
        loadonce: true,
        jsonReader: { repeatitems: false },
        onSelectRow: function (rowId, status, e) {

            if (status === false) {
                delete selectedRows[rowId];
            } else {
                selectedRows[rowId] = status;
            }

        },
        onSelectAll: function (rowIds, status) {

            //apply select all to only those items in filter/search
            if (status === true) {
                for (var i = 0; i < rowIds.length; i++) {
                    selectedRows[rowIds[i]] = true;
                }
            } else {
                for (var i = 0; i < rowIds.length; i++) {
                    delete selectedRows[rowIds[i]];
                }
            }
        },
        gridComplete: function () {
            for (var rowId in selectedRows) {
                $("#packageResults").setSelection(rowId, true);
            }
        }
    });
    $("#packageResults").jqGrid('navGrid',
        { edit: false, add: false, del: false, search: true, view: false, refresh: true },
        {}, {}, {}, { multipleSearch: true, multipleGroup: true, showQuery: true });
    $("#packageResults").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });


});

提前致谢。

【问题讨论】:

  • 在加载网格后,不清楚在哪里应用了一些 过滤器。你从哪里得到过滤器(它是静态的,你从服务器加载它,从localStorage,...)。您应该使用forceClientSorting: true 选项,它允许对从服务器加载的数据进行排序和过滤。请参阅the demo,它使用postData.filters 应用过滤器和another one,它另外使用additionalProperties
  • onSelectAll 的行为对我来说不是很清楚。一个你用所需的值填充selarrrow,然后行将在更改页面时自动选择(因为multiPageSelection: true)。 selarrrow 数组将替换 selectedRows。如果selarrrow/selectedRows 中的所有可见(来自当前页面)行已被选中,那么您无需在onSelectAllonSelectRow 内执行任何操作。我不确定您要实现哪种行为。
  • @Oleg 用户负责在网格加载后应用过滤器。预期的行为是,网格加载,用户将过滤器应用于网格,用户单击“全选”选项,这应该只选择过滤的数据。实际的行为是当用户点击“全选”时,所有的数据行都被选中。请问如何实现预期的行为?
  • @Oleg 我使用您之前的演示创建了一个演示,希望能说明我的问题 - jsfiddle.net/ja2awqgL。在“Shipped via”列下,如果您按“FedEx”过滤,您应该在 2 页上有 7 个结果。如果您随后使用多选/全选选项,这将选择所有行,但我只想从过滤结果中选择 7 行。然后,如果我删除过滤器并应用不同的过滤器,我希望选择 7 行以及我选择的任何其他行。希望这可以澄清事情。谢谢。

标签: javascript jquery free-jqgrid


【解决方案1】:

解决办法大概如下

multiPageSelection: true, 
multiselect: true,
onSelectAll: function (rowIds, selected) {
    var p = $(this).jqGrid("getGridParam"), id, i,
        filteredIds = p.search ?
            $.map(p.lastSelectedData, function (item) {
                return item[p.localReader.id];
            }) :
            [];

    if (selected && filteredIds.length > 0) {
        for (id in p._index) { // enumerate all rowids
            if ($.inArray(id, filteredIds) < 0) {
                // remove non-filtered rowids from p.selarrrow
                i = $.inArray(id, p.selarrrow);
                if (i >= 0) {
                    p.selarrrow.splice(i, 1);
                }
            }
        }
    }

}

https://jsfiddle.net/OlegKi/ja2awqgL/4/

【讨论】:

  • 嗨@Oleg - 抱歉回复晚了。谢谢你回到我身边。这似乎做了我想做的一些事情,但是当用户更改过滤条件并单击“全选”时,我想继续添加到p.selarrrow
  • @jgill09:不客气!我仍然不明白您要实现哪种自定义行为。演示jsfiddle.net/OlegKi/ja2awqgL/4,我在“全选”单击时发布了已选择的(在p.selarrrow 中)所有过滤行。 p.selarrrow 将通过选择自动修改。如果您想在用户应用清除过滤器的新过滤器时更改p.selarrrow,您可以定义beforeSearchbeforeClear 回调(参见here)。您可以在回调中修改p.selarrrow
  • @jgill09:我的演示中的测试用例如下:1)在“关闭”列中设置过滤器"yes",2)单击“全选” - 过滤后的行将被选中, 3) 更改“关闭”列中的过滤器"any" 以查看所有行。您将看到先前选择的行(通过单击“全选”时的过滤器)保持选中状态。
  • 我要的测试用例是 1) 在“发货方式”列上设置过滤器"Fedex" 2) 单击“全选” 3) 在“运送方式”列 4) 单击“全选” 5) 在“运送方式”列上设置过滤器"any"。我应该看到所有"Fedex""TNT" 行被选中。希望能澄清事情。提前致谢。
  • @jgill09:抱歉,但您想要实现非常奇特的行为。您是否考虑过 uncelect all 行为?让我们打开任何演示并单击“全选”按钮(名称不正确)。第一次单击的意思是“全选”,但第二次是“取消全选”。该按钮在您的情况下应该如何工作?