如何仅在jQgrid中选择已过滤的行?

时间:2018-02-23 20:42:26

标签: javascript jquery jqgrid free-jqgrid

我有一个网格(用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可以看到发生问题的地方

重现问题的步骤:

  • Filename
  • 过滤列test
  • 使用第一个复选框标记所有
  • 如果不取消标记,请删除过滤器
  • 结果:所有内容都已选中,因此会发布

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

1 个答案:

答案 0 :(得分:1)

我发现你描述的问题非常有趣,因此我改变了&#34;选择全部&#34;的默认行为。按钮(复选框)仅选择当前过滤的数据(请参阅the commit)。值selectAllMode的新选项"all"允许具有旧行为。

您的演示使用GitHub中最新的免费jqGrid,因此它应该可以像您想要的那样工作。