ag-grid动态刷新单元格

标签：res data sheet lis bool type nta settime dde

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动态刷新单元格

标签：res data sheet lis bool type nta settime dde

原文地址：https://www.cnblogs.com/gavinlib/p/12991532.html