如何在重新加载 JQuery Grid 时保持复选框选择？

Question

我有一个 JQuery 网格，每当服务器上发生某些事件（即数据集中的更新）时，我都会重新加载它，并在网格中显示最新的数据集。该网格的第一列也有复选框。发生的情况是，假设用户正在选择一些复选框，与此同时，如果网格由于服务器上的数据更新而重新加载，我的网格会重新加载最新的数据集，但我之前的所有复选框选择都会丢失。如何在重新加载网格后再次标记这些选中的复选框？

请提出建议。

function PushData() {
    // creates a proxy to the Alarm hub
    var alarm = $.connection.alarmHub;
    alarm.notification = function () {
        $("#jqTable").trigger("reloadGrid",[{current:true}]); 
    };
    // Start the connection and request current state
    $.connection.hub.start(function () {
        BindGrid();
    });
}
function BindGrid() {
    jqDataUrl = "Alarm/LoadjqData";
    var selectedRowIds;
    $("#jqTable").jqGrid({
        url: jqDataUrl,
        cache: false,
        datatype: "json",
        mtype: "POST",
        multiselect: true ,
        postData: {
            sp: function () { return getPriority(); },
            },
        colNames: ["Id", "PointRef", "Value", "State", "Ack State", "Priority", "AlarmDate", "", ""],
        colModel: [
            //{ name: 'alarmId_Checkbox', index: 'chekbox', width: 100, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" },
            { name: "AlarmId", index: "AlarmId", width: 70, align: "left" },
            { name: "PointRef", index: "PointRef", width: 200, align: "left" },
            { name: "Value", index: "Value", width: 120, align: "left" },
            { name: "AlarmStateName", index: "AlarmStateName", width: 150, align: "left" },
            { name: "AcknowledgementStateName", index: "AcknowledgementStateName", width: 200, align: "left" },
            { name: "Priority", index: "Priority", width: 130, align: "left" },
            { name: "AlarmDate", index: "AlarmDate", width: 250, align: "left" },
            { name: "TrendLink", index: "Trends", width: 100, align: "left" },
            { name: "MimicsLink", index: "Mimics", width: 100, align: "left" }
            ],
        // Grid total width and height
        width: 710,
        height: 500,
        hidegrid: false,
        // Paging
        toppager: false,
        pager: $("#jqTablePager"),
        rowNum: 20,
        rowList: [5, 10, 20],
        viewrecords: true, // "total number of records" is displayed
        // Default sorting
        sortname: "Priority",
        sortorder: "asc",
        // Grid caption
        caption: "Telemetry Alarms",
        onCellSelect: function (rowid, icol, cellcontent, e) {
            var cm = jQuery("#jqTable").jqGrid('getGridParam', 'colModel');
            var colName = cm[icol];
            //alert(colName['index']);
            if (colName['index'] == 'AlarmId') {
                if ($("#AlarmDialog").dialog("isOpen")) {
                    $("#AlarmDialog").dialog("close");
                }
                AlarmDialogScript(rowid)
            }
            else if (colName['index'] == 'Trends') {
                TrendDialogScript(rowid)
            }
            else if (colName['index'] == 'Mimics') {
                MimicsDialogScript(rowid)
            }
            else {
                $("#jqTable").setCell(rowid, "alarmId_Checkbox", true); //Selects checkbox while clicking any other column in the grid
            }
        },
        recreateFilter: true,
        emptyrecords: 'No Alarms to display',
        loadComplete: function () {
            var rowIDs = jQuery("#jqTable").getDataIDs();
            for (var i = 0; i < rowIDs.length; i++) {
                rowData = jQuery("#jqTable").getRowData(rowIDs[i]);
                //change the style of hyperlink coloumns
                $("#jqTable").jqGrid('setCell', rowIDs[i], "AlarmId", "", { 'text-decoration': 'underline', 'cursor': 'pointer' });
                $("#jqTable").jqGrid('setCell', rowIDs[i], "TrendLink", "", { 'text-decoration': 'underline', 'cursor': 'pointer' });
                $("#jqTable").jqGrid('setCell', rowIDs[i], "MimicsLink", "", { 'text-decoration': 'underline', 'cursor': 'pointer' });
                if ($.trim(rowData.AcknowledgementStateName) == 'Active') {
                    $("#jqTable").jqGrid('setCell', rowIDs[i], "AcknowledgementStateName", "", { 'background-color': 'red', 'color': 'white' });
                }
                else if ($.trim(rowData.AcknowledgementStateName) == 'Acknowledged') {
                    $("#jqTable").jqGrid('setCell', rowIDs[i], "AcknowledgementStateName", "", { 'background-color': 'Navy', 'color': 'white' });
                }
            }
            //$("#jqTable").jqGrid('hideCol', "AlarmId") //code for hiding a particular column
        },
        gridComplete: function () {
            $('#jqTable input').bind('mouseover', function () {
                var tr = $(this).closest('tr');
                if ($("#AlarmDialog").dialog("isOpen")) {
                    $("#AlarmDialog").dialog("close");
                }
                AlarmDialogScript(tr[0].id);
            }
            );
        }
    }).navGrid("#jqTablePager",
    { refresh: true, add: false, edit: false, del: false },
    {}, // settings for edit
    {}, // settings for add
    {}, // settings for delete
    {sopt: ["cn"]} // Search options. Some options can be set on column level
    )
    .trigger('reloadGrid', [{page:1, current:true}]);
}

Answer 1

如果我理解你是正确的，你只需要使用额外的参数 i

$("#list").trigger("reloadGrid", [{current:true}]);

或

$("#list").trigger("reloadGrid", [{page: 1, current: true}]);

（请参阅the answer）。它的作用与 Justin 的建议几乎相同。

根据您在重新加载网格时的确切含义，您可能需要保存网格状态，包括localStorage 中的选定项目列表，并在加载网格后重新加载状态。 This answer 详细描述了实现。答案中对应的demo 可以使用 4.3.2 版中引入的新 jqGrid 事件进行简化。

Answer 2

您可以在重新加载网格之前保存选择，例如在beforeRequest 事件中：

selectedRowIDs = jQuery('#myGrid').getGridParam('selarrrow');

然后在重新加载网格后，您可以循环 selectedRowIDs 并使用 setSelection 重新选择每个网格。例如：

for (i = 0, count = selectedRowIDs.length; i < count; i++) {
    jQuery('#myGrid').jqGrid('setSelection', selectedRowIDs[i], false);
}

您可以在 loadComplete 事件中运行此代码。

Answer 3

使用

recreateFilter: true 

你应该完成了