0

複数選択された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>
4

1 に答える 1

1

問題は解決されました。グリッドのリロード時に、行をチェックする関数が document.ready() のように呼び出され、グリッド上の 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);
            }
            }
        }
于 2012-05-25T11:41:00.977 に答える