Question

我有一个多选的Jqgrid。最初在从服务器加载带有Json响应的网格时，当我从一个页面导航到另一个页面时，多选行保持正确。

所选行的ID存储在一个数组中，此数组在分页时更新。我在返回页面时使用此数组来检查已选择的行。排序工作正常，到目前为止我没有遇到任何问题。

在特定字段上应用过滤器时，会向服务器发送一个请求，该服务器在Json中返回新的过滤结果，然后用它重新加载网格。

第一页正确呈现，选中的行已选中，但在更改页面并返回时，不再选择行。但是，该数组仍然包含id，并且还包含新添加的ID。

重新加载后，多选功能如何停止工作？或者甚至不是因为重载？

以下是代码：

        <script type='text/javascript'>
var selectedFieldsMap={};
var selectedFieldsObjs = [];
var selectedFieldIds = [];
$(function() {
    //function called when applying a filter
    $('#ApplyFilterBtn').click(function() {
            saveGridState();
        $('#Grid').setGridParam({ url: getUrl() });
        $('#Grid').trigger('reloadGrid');
    });
});

function saveGridState() {
       var selectedIds = $('#Grid').getGridParam('selarrrow');
       $('#Grid').data(current_page, selectedIds);
       _.each(selectedIds, function(id) {
                selectedFieldIds.push(id);
            });
       var idsToBeAdded = _.difference(selectedIds, getExistingRowIdsForGrid('#list'));
       selectedFieldsMap[current_page] = idsToBeAdded;
       _.each(idsToBeAdded, function(id) {
       selectedFieldsObjs.push($('#Grid').getRowData(id));
                   });
}

function getExistingRowIdsForGrid(gridSelector) {
var existingFields = $(gridSelector).getRowData();
return  _.map(existingFields, function(obj) { return obj.Id; });    

function resetFilterValuesAndReloadGrid() {
    //reset filters and set grid param
    $('#Grid').setGridParam({
        sortname: 'Id',
        sortorder: 'asc',
        page: 1,
        url: getUrl()
    });
    $('#Grid').jqGrid('sortGrid', 'Id', true);
    $("#Grid").trigger('reloadGrid');
}

    $("#Grid").jqGrid({
        url: getUrl(),
        datatype: "json",
        edit: false,
        add: false,
        del: false,
        height: 330,
        mtype: 'GET',
        colNames: ['Id', 'Type', 'Category'],
        jsonReader: {
            root: "DataRoot",
            page: "CurrentPage",
            total: "TotalPages",
            records: "TotalRecords",
            repeatitems: false,
            cell: "",
            id: "0"
        },
        colModel: [
            { name: 'Id', index: 'Id', width: 95, align: 'center', sorttype: "int" },
            { name: 'Type', index: 'ValueTypeName', width: 110, align: 'left',sortable: true },
            { name: 'Category', index: 'Category', width: 72, align: 'left', sortable: true },
        ],

        pager: '#pager',
        rowNum: pageCount[0],
        rowList: pageCount,
        sortname: 'Id',
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        multiselect: true,

        loadComplete: function () {
            if(selectedFieldIds) {   
         $.each(_.uniq(selectedFieldIds), function(index, value) {
                    $('#Grid').setSelection(value, true);
                });
            }
        } ,

        onPaging : function () {
            saveGridState();
        },

        loadBeforeSend: function() {
            current_page = $(this).getGridParam('page').toString();

        } ,
        onSortCol: function () {
            saveGridState();
        }
    });

}

function getUrl() {
//return url with the parameters and filtering
}
 </script>

Answer 1

问题解决了，发生的事情是重新加载网格，检查行的函数被调用，因为它在document.ready（）和on grid loadComplete中调用相同的函数。切换发生并删除选择。我添加了一个if条件来查看网格是否被选中。

 loadComplete: function () {
            var selRowIds = jQuery('#Grid').jqGrid('getGridParam', 'selarrrow');
            if (selRowIds.length > 0) {
                return false;
            } else {
                var $this = $(this), i, count;
                for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
                    $this.jqGrid('setSelection', idsOfSelectedRows[i], false);
            }
            }
        }

Jqgrid - 在触发JqGrid重新加载后，Multiselectected行不再持久

1 个答案: