Question

我正在使用免费的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" });


});

提前致谢。

Answer 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/。

免费jqGrid - 搜索过滤器并选择全部

1 个答案: