javascript - 我如何只选择 jQgrid 中过滤的行？

Question

我有一个网格(使用 jqGrid 4.15.2 制作)。代码如下所示:

$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;

$(function () {
    "use strict";

    var $grid = $("#list"),
        maximizeGrid = function () {
            var newWidth = $grid.closest(".ui-jqgrid").parent().width();
            $grid.jqGrid("setGridWidth", newWidth, true);
        };

    // Resize grid if window is being resized
    $(window).on("resize", maximizeGrid);

    $grid.jqGrid({
        colNames: ["", "Form #", "Form", "Plan", "Class", "Drug"],
        colModel: [
            {name: "act", template: "actions"},
            {
                name: "FormId",
                align: 'center',
                fixed: true,
                frozen: true,
                resizable: false,
                width: 100,
                editable: "hidden"
            },
            {name: "FormName", search: true, stype: "text"},
            {name: "PlanName", search: true, stype: "text"},
            {
                name: "DrugGroupName",
                edittype: "select",
                editable: true,
                search: true,
                editoptions: {
                    dataUrl: "/ajax/drug_groups/get_all",
                    buildSelect: function (data) {
                        var select = "<select>", i;
                        for (i = 0; i < data.length; i++) {
                            select += "<option value='" + String(data[i].Id) + "'>" + $.jgrid.htmlEncode(data[i].DrugGroupName) + "</option>"
                        }

                        return select + "</select>";
                    },
                    selectFilled: function (options) {
                        setTimeout(function () {
                            $(options.elem).select2({
                                width: "100%"
                            });
                        }, 0);
                    }
                },
                stype: "select", searchoptions: {
                    sopt: ["eq", "ne"],
                    generateValue: true,
                    noFilterText: "Any",
                    selectFilled: function (options) {
                        setTimeout(function () {
                            $(options.elem).select2({
                                width: "100%"
                            });
                        }, 0);
                    }
                }
            },
            {name: "DrugName", search: true, stype: "text"}
        ],
        cmTemplate: {
            width: 300,
            autoResizable: true
        },
        iconSet: "fontAwesome",
        rowNum: 25,
        guiStyle: "bootstrap",
        autoResizing: {
            compact: true,
            resetWidthOrg: true
        },
        rowList: [25, 50, 100, "10000:All"],
        toolbar: [true, "top"],
        viewrecords: true,
        autoencode: true,
        sortable: true,
        pager: true,
        toppager: true,
        cloneToTop: true,
        hoverrows: true,
        multiselect: true,
        multiPageSelection: true,
        rownumbers: true,
        sortname: "Id",
        sortorder: "desc",
        loadonce: true,
        autowidth: true,
        autoresizeOnLoad: true,
        forceClientSorting: true,
        prmNames: {id: "Id"},
        jsonReader: {id: "Id"},
        url: '/ajax/plans_to_forms/get_all',
        datatype: "json",
        editurl: '/ajax/plans_to_forms/update',
        formDeleting: {
            url: '/ajax/plans_to_forms/delete/',
            delicon: [true, "left", "fa-scissors"],
            cancelicon: [true, "left", "fa-times"],
            width: 320,
            caption: 'Delete Plan to Form Link',
            msg: 'Are you sure you want to delete this link?',
            beforeShowForm: function ($form) {
                var rowids = $form.find("#DelData>td").data("rowids");

                $form.closest(".ui-jqdialog").position({
                    of: window,
                    my: "center center",
                    at: "center center"
                });

                if (rowids.length > 1) {
                    $form.find("td.delmsg").html('Are you sure you want to delete all the selected form links?');
                }
            },
            afterComplete: function (response, postdata, formid) {
                if (response.responseText === "true") {
                    toastr["success"]("The link was deleted successfully.", "Information");
                } else {
                    toastr["error"]("Something went wrong, the link could not be deleted.", "Error");
                }
            }
        },
        ajaxSelectOptions: {
            type: "POST",
            dataType: "json"
        },
        navOptions: {
            edit: false,
            add: false,
            search: false
        },
        inlineEditing: {
            keys: true,
            focusField: "DrugGroupName",
            serializeSaveData: function (postData) {
                var changedData = {}, prop, p = $(this).jqGrid("getGridParam"),
                    idname = p.keyName || p.prmNames.id,
                    oldValue, cm;

                for (prop in postData) {
                    oldValue = p.savedRow[0][prop];
                    if (p.iColByName[prop] != null) {
                        cm = p.colModel[p.iColByName[prop]];
                    }

                    if (postData.hasOwnProperty(prop) && (postData[prop] !== oldValue || prop === idname)) {
                        changedData[prop] = postData[prop];
                    }
                }

                return changedData;
            },
            aftersavefunc: function () {
                toastr["success"]("The record was updated successfully.", "Information");
            },
            errorfunc: function () {
                toastr["error"]("Something went wrong, the record could not be updated.", "Error");
            }
        },
        onSelectRow: function (rowid, status, e) {
            var $self = $(this),
                $td = $(e.target).closest("tr.jqgrow>td"),
                p = $self.jqGrid("getGridParam"),
                savedRow = p.savedRow;

            if (savedRow.length > 0 && savedRow[0].id !== rowid) {
                $self.jqGrid("restoreRow", savedRow[0].id);
            }

            if ($td.length > 0 && $td[0].cellIndex !== p.iColByName.act) {
                // don't start editing mode on click on "act" column
                $self.jqGrid("editRow", rowid);
            }
        },
        loadComplete: function () {
            var $self = $(this), p = $self.jqGrid("getGridParam");

            if (p.datatype === "json") {
                // recreate the toolbar because we use generateValue: true option in the toolbar
                $self.jqGrid("destroyFilterToolbar").jqGrid("filterToolbar");
            }
        }
    }).jqGrid('navGrid').jqGrid("filterToolbar").jqGrid('setFrozenColumns');

    // fill top toolbar
    $('#t_' + $.jgrid.jqID($grid[0].id)).append($("<div><label for=\"globalSearchText\">Global search in grid for:&nbsp;</label><input id=\"globalSearchText\" type=\"text\"></input>&nbsp;<button id=\"globalSearch\" type=\"button\">Search</button></div>"));

    $("#globalSearchText").keypress(function (e) {
        var key = e.charCode || e.keyCode || 0;
        if (key === $.ui.keyCode.ENTER) { // 13
            $("#globalSearch").click();
        }
    });

    $("#globalSearch").button({
        icons: {primary: "ui-icon-search"},
        text: false
    }).click(function () {
        var postData = $grid.jqGrid("getGridParam", "postData"),
            colModel = $grid.jqGrid("getGridParam", "colModel"),
            rules = [],
            searchText = $("#globalSearchText").val(),
            l = colModel.length,
            i,
            cm;
        for (i = 0; i < l; i++) {
            cm = colModel[i];
            if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
                rules.push({
                    field: cm.name,
                    op: "cn",
                    data: searchText
                });
            }
        }
        postData.filters = JSON.stringify({
            groupOp: "OR",
            rules: rules
        });
        $grid.jqGrid("setGridParam", {search: true});
        $grid.trigger("reloadGrid", [{page: 1, current: true}]);

        return false;
    });
});

当我过滤某些东西然后想标记过滤的结果以便出于某种原因删除所有结果时，所有内容都被选中，即使是那些没有被过滤的，它正在将所有 ID 发送到后端，因此当我丢失所有内容时根据ID删除。

也许这是一个愚蠢的选择或其他原因，但我找不到问题所在。 Here is a video我已经提出了这个问题。 Here is a Fiddle玩你可以看到问题发生的地方

重现问题的步骤:

• 通过test过滤列Filename
• 使用第一个复选框标记所有这些
• 不取消任何标记，删除过滤器
• 结果:所有内容均已选择，因此将发布

有什么想法吗？有帮助吗？

Answer 1

我发现您描述的问题非常有趣，因此我更改了“全选”按钮(复选框)的默认行为以仅选择当前过滤的数据(参见 the commit )。值为 "all" 的新选项 selectAllMode 允许具有旧行为。

您的演示使用了直接来自 GitHub 的最新免费 jqGrid，因此它应该已经像您想要的那样工作了。