Aktualizuję moje dane poza kodem związanym z Ag-Grid. Mam zmienną this.works, która przechowuje całe „portfolio” użytkownika dla mojego projektu menedżera portfela. Mam this.loadMore(), który ładuje więcej danych z serwera (do którego nie mam dostępu, dlatego ładuję dane zewnętrznie).

Używam modelu „nieskończonego” wiersza, aby mieć nieskończone przewijanie. Zacząłem używać źródła danych, ponieważ chcę też używać sortowania i filtrowania.

Problem polega na tym, że kiedy aktualizuję źródło danych, przewijanie jest resetowane do góry. To bardzo irytujące zachowanie.

Korzystanie ze społeczności Ag-Grid i Vue.js.

GridOptions (ustawione w beforeMount ())

  this.gridOptions = {
    suppressScrollOnNewData: true,
    rowSelection: 'single',
    rowModelType: 'infinite',
    deltaRowDataMode: true,
    defaultColDef: {
      sortable: false,
      resizable: true
    },
    columnTypes: {
      'imageColumn': {
        width: 150,
        sortable: false,
        autoHeight: true,
        cellRendererFramework: AgGridImageFormatter
      },
      'priceColumn': {
        cellRendererFramework: AgGridPriceFormatter
      }
    }
  };

Metody:

({
  methods: {
    onBodyScroll: function(event) {
      var lastDisplayedWork, ref, worksCount;
      worksCount = this.works.length;
      lastDisplayedWork = (ref = this.gridOptions.api) != null ? ref.getLastDisplayedRow() : void 0;
      if (worksCount - 2 < lastDisplayedWork) {
        event.api.ensureIndexVisible(worksCount - 2);
        this.loadMore();
        return event.api.setDatasource(this.gridDatasource);
      }
    },
    CreateAgGridDataSource: function(worksData) {
      return {
        rowCount: this.works.length,
        getRows: (function(_this) {
          return function(params) {
            var lastRow, rowsThisPage;
            rowsThisPage = _this.works.slice(params.startRow, params.endRow);
            lastRow = -1;
            return params.successCallback(rowsThisPage, lastRow);
          };
        })(this)
      };
    },
    onRowSelected: function(event) {
      return this.workClicked(event.data.id);
    },
    onGridReady: function(event) {
      this.gridDatasource = this.CreateAgGridDataSource(this.works);
      return event.api.setDatasource(this.gridDatasource);
    }
  }
});

Przepraszam za dziwny kod JS, używam konwertera CoffeeScript na JS. Myślę, że powinno być dobrze.

HTML:

<div id="gridContainer">
    <ag-grid-vue class="ag-theme-balham" id="AgGrid" :gridOptions="gridOptions" :modules="agGridModules" :columnDefs="agGridColDefs" @body-scroll="onBodyScroll" @row-selected="onRowSelected" @grid-ready="onGridReady"></ag-grid-vue>
</div>

Jak mogę się upewnić, że przewijanie pozostanie tam, gdzie użytkownik przewinął? Gwoli ścisłości, użycie api.refreshCells() nie działa. Dzięki temu otrzymuję puste wiersze po pierwszym wywołaniu danych (więc wyświetlane są tylko pierwsze ~ 23 elementy). Dlatego muszę „odświeżać” źródło danych za każdym razem, gdy pobierane są nowe dane.

2
Dan 16 grudzień 2019, 18:59
Mam ten sam problem...
 – 
Giovanni Avila
27 sierpień 2020, 11:02

2 odpowiedzi

Najlepsza odpowiedź

To nie będzie odpowiednia odpowiedź dla wszystkich, ale moja firma poszła naprzód i kupiła Enterprise Ag-Grid. To dało mi dostęp do modelu wiersza po stronie serwera, co z kolei daje możliwość renderowania tylko niektórych wierszy. Mogę naśladować pobieranie z serwera wewnątrz pobierania źródła danych, a następnie renderować tylko zwrócone wiersze. To jest dla nas wystarczające, ponieważ mamy licencję - nie sądzę, aby coś takiego było możliwe w przypadku edycji społecznościowej.

0
Dan 20 listopad 2020, 00:07

To działa dobrze:

gridOptions.api.refreshInfiniteCache()
0
Radosław Krajewski 8 luty 2021, 20:47