ag-grid動態刷新行

Redraw Rows

Redraw rows is a much heavier operation than refreshing cells. If refreshing cells meets your needs, then don't use redraw rows. A row redraw will rip the row out of the DOM and draw it again from scratch.

Use redraw row if you want to create the row again from scratch. This is useful when you have changed a property that only gets used when the row is created for the first time such as:

Whether the row is fullWidth or not.
The cellRenderer used for any cell (as this is specified once when the cell is created).
You want to specify different styles for the row via the callbacks getRowStyle() or getRowClass().

To get the grid to redraw rows, call api.redrawRows(). The interface is as follows:

// method for redraw rows
function redrawRows(params: RedrawRowsParams = {})

// params for redraw rows
interface RedrawRowsParams {
    rowNodes?: RowNode[]; // the row nodes to redraw
}

Example Redraw Nodes

Below shows calling api.redrawRows() with different to change the background color of the rows. From the example, the following can be noted:

The Redraw All Rows redraws all the rows using a different background color by calling api.redrawRows() with no parameters.
The Redraw Top Rows redraws only the top half of the rows by calling api.redrawRows({rowNodes}).

<!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>
    </head>

<body>
    <div style="margin-bottom: 5px;">
  <button onclick="redrawAllRows()">Redraw All Rows</button>
  <button onclick="redrawTopRows()">Redraw Top Rows</button>
</div>
<div style="height: calc(100% - 25px);">
  <div id="myGrid" style="height: 100%;" class="ag-theme-alpine-dark"></div>
</div>

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

var colorIndex = 0;
var colors = ['#000000', '#000066', '#006600', '#660000'];

var gridOptions = {
  columnDefs: [
    { headerName: 'A', field: 'a' },
    { headerName: 'B', field: 'b' },
    { headerName: 'C', field: 'c' },
    { headerName: 'D', field: 'd' },
    { headerName: 'E', field: 'e' },
    { headerName: 'F', field: 'f' },
  ],
  defaultColDef: {
    flex: 1,
  },
  rowData: createData(12),
  getRowStyle: function() {
    return {
      backgroundColor: colors[colorIndex],
    };
  },
};

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 progressColor() {
  colorIndex++;
  if (colorIndex === colors.length) {
    colorIndex = 0;
  }
}

function redrawAllRows() {
  progressColor();
  gridOptions.api.redrawRows();
}

function redrawTopRows() {
  progressColor();
  var rows = [];
  for (var i = 0; i < 6; i++) {
    var row = gridOptions.api.getDisplayedRowAtIndex(i);
    rows.push(row);
  }
  gridOptions.api.redrawRows({ rowNodes: rows });
}

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

Redraw Rows

Example Redraw Nodes

免責聲明！