ag-grid动态刷新单元格

Posted 2020-12-06 gavinlib

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ag-grid动态刷新单元格相关的知识，希望对你有一定的参考价值。

Refresh Cells

To get the grid to refresh the cells, call api.refreshCells(). The interface is as follows:

// method for refreshing cells
function refreshCells(params: RefreshCellsParams = {}): void;

// params for refresh cells
interface RefreshCellsParams {
    rowNodes?: RowNode[]; // specify rows, or all rows by default
    columns?: (string|Column)[]; // specify columns, or all columns by default
    force?: boolean; // skips change detection, refresh everything
}

Each parameter is optional. The simplest is to call with no parameters which will refresh all cells using change detection (change detection means it will only refresh cells who‘s values have changed).

Example Refresh Cells

Below shows calling api.refreshCells() with different scenarios using a mixture of the rowNodes, columns and force parameters. From the example, the following can be noted:

The grid has enableCellChangeFlash=true, so cells that are refreshed will be flashed.
Column A has suppressCellFlash=true which means this column is excluded from the flashing.
The grid has two pinned rows at the top and two pinned rows at the bottom. This is to demonstrate that cell refreshing works for pinned rows also.
The three buttons each make use of a scramble operation. The scramble operation selects 50% of the cells at random and assigns new values to them. This is done outside of the grid so the grid has not been informed of the data changes. Each button then gets the grid to refresh in a different way.
The Scramble & Refresh All button will scramble the data, then call api.refreshCells(). You will notice that randomly half the cells will flash as the change detection only update the cells who‘s underlying values have changed.
The Scramble & Refresh Left to Right button will scramble as before, then call api.refreshCells({columns}) 5 times, 100ms apart, once for each column. This will show the grid refreshing one column at a time from left to right.
The Scramble & Refresh Top to Bottom button will scramble as before, then call api.refreshCells({rowNodes}) 20 times, 100ms apart, once for each row (including pinned rows). This will show the grid refreshing one row at a time from top to bottom.
The checkbox Force Refresh sets how the above three refreshes work. If checked, all the cells will get refreshed regardless of whether they have changes. In other words, change detection will not but used as part of the refresh.

技术图片

.test-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.test-header {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  margin-bottom: 5px;
}

.ag-floating-top .ag-row {
  background-color: black;
}
.ag-floating-bottom .ag-row {
  background-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <script>var __basePath = ‘/‘;</script>
    <style media="only screen">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }

        html {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            overflow: auto;
        }

        body {
            padding: 1rem;
            overflow: auto;
        }
    </style>
            <script src="https://unpkg.com/@ag-grid-community/all-modules@23.1.1/dist/ag-grid-community.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="test-container">
  <div class="test-header">
    <button onclick="scrambleAndRefreshAll()">Scramble & Refresh All</button>

    <button onclick="scrambleAndRefreshLeftToRight()">
      Scramble & Refresh Left to Right
    </button>

    <button onclick="scrambleAndRefreshTopToBottom()">
      Scramble & Refresh Top to Bottom
    </button>

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

    <label>
      <input type="checkbox" id="forceRefresh" />
      Force Refresh
    </label>
  </div>
  <div
    id="myGrid"
    style="height: calc(100% - 30px);"
    class="ag-theme-alpine-dark"
  ></div>
</div>

    <script src="main.js"></script>
</body>
</html>

// placing in 13 rows, so there are exactly enough rows to fill the grid, makes
// the row animation look nice when you see all the rows
var data = [];
var topRowData = [];
var bottomRowData = [];

var gridOptions = {
  columnDefs: [
    { field: ‘a‘, suppressCellFlash: true },
    { field: ‘b‘ },
    { field: ‘c‘ },
    { field: ‘d‘ },
    { field: ‘e‘ },
    { field: ‘f‘ },
  ],
  defaultColDef: {
    flex: 1,
  },
  rowData: [],
  pinnedTopRowData: [],
  pinnedBottomRowData: [],
  enableCellChangeFlash: true,
  onGridReady: function(params) {
    // placing in 13 rows, so there are exactly enough rows to fill the grid, makes
    // the row animation look nice when you see all the rows
    data = createData(14);
    topRowData = createData(2);
    bottomRowData = createData(2);
    params.api.setRowData(data);
    params.api.setPinnedTopRowData(topRowData);
    params.api.setPinnedBottomRowData(bottomRowData);
  },
};

function createData(count) {
  var result = [];
  for (var i = 1; i <= count; i++) {
    result.push({
      a: (i * 863) % 100,
      b: (i * 811) % 100,
      c: (i * 743) % 100,
      d: (i * 677) % 100,
      e: (i * 619) % 100,
      f: (i * 571) % 100,
    });
  }
  return result;
}

function isForceRefreshSelected() {
  return document.querySelector(‘#forceRefresh‘).checked;
}

function scrambleAndRefreshAll() {
  scramble();
  var params = {
    force: isForceRefreshSelected(),
  };
  gridOptions.api.refreshCells(params);
}

function scrambleAndRefreshLeftToRight() {
  scramble();

  var api = gridOptions.api;
  [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘, ‘f‘].forEach(function(col, index) {
    var millis = index * 100;
    var params = {
      force: isForceRefreshSelected(),
      columns: [col],
    };
    callRefreshAfterMillis(params, millis, api);
  });
}

function scrambleAndRefreshTopToBottom() {
  scramble();

  var frame = 0;
  var i;
  var rowNode;

  var api = gridOptions.api;
  for (i = 0; i < api.getPinnedTopRowCount(); i++) {
    rowNode = api.getPinnedTopRow(i);
    refreshRow(rowNode, api);
  }

  for (i = 0; i < gridOptions.api.getDisplayedRowCount(); i++) {
    rowNode = gridOptions.api.getDisplayedRowAtIndex(i);
    refreshRow(rowNode, api);
  }

  for (i = 0; i < gridOptions.api.getPinnedBottomRowCount(); i++) {
    rowNode = gridOptions.api.getPinnedBottomRow(i);
    refreshRow(rowNode, api);
  }

  function refreshRow(rowNode, api) {
    var millis = frame++ * 100;
    var rowNodes = [rowNode]; // params needs an array
    var params = {
      force: isForceRefreshSelected(),
      rowNodes: rowNodes,
    };
    callRefreshAfterMillis(params, millis, api);
  }
}

function callRefreshAfterMillis(params, millis, gridApi) {
  setTimeout(function() {
    gridApi.refreshCells(params);
  }, millis);
}

function scramble() {
  data.forEach(scrambleItem);
  topRowData.forEach(scrambleItem);
  bottomRowData.forEach(scrambleItem);
}

function scrambleItem(item) {
  [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘, ‘f‘].forEach(function(colId) {
    // skip 50% of the cells so updates are random
    if (Math.random() > 0.5) {
      return;
    }
    item[colId] = Math.floor(Math.random() * 100);
  });
}

// setup the grid after the page has finished loading
document.addEventListener(‘DOMContentLoaded‘, function() {
  var gridDiv = document.querySelector(‘#myGrid‘);
  new agGrid.Grid(gridDiv, gridOptions);
});

以上是关于ag-grid动态刷新单元格的主要内容，如果未能解决你的问题，请参考以下文章

如何更改 ag-grid 单元格的颜色以动态更改数据

角度 ag-grid 单元格渲染器复选框不刷新值

如何在 Angular 项目中自动刷新 ag-grid 中的单元格

Ag-grid 高亮单元格逻辑无法正常工作

在 AG-GRID Angular 中插入单元格断线

角度的ag-grid中的单元格渲染问题