如何使最后一行正常运行，直到它到达视口的末尾，然后在 AgGrid 中充当浮点行

Question

我的网格中有一行总计。我希望此行附加到最后一行，如果行数较少且未填充整个视口。如果网格主体高度超过视口高度，则总行应充当浮动行。如何在AgGrid中做到这一点？

提前致谢

普罗提

var columnDefs = [{
    headerName: "Name",
    field: "name"
  },
  {
    headerName: "Price1",
    field: "price1"
  },
  {
    headerName: "Price2",
    field: "price2"
  }
];
var totalRow = {
  name: "Total",
  price1: 6000,
  price2: 139000
};
var rowData = [{
    name: "Toyota",
    price1: 1000,
    price2: 35000
  },
  {
    name: "Ford",
    price1: 2000,
    price2: 32000
  },
  {
    name: "Porsche",
    price1: 3000,
    price2: 72000
  }
];
var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  floatingBottomRowData: [totalRow]
};
document.addEventListener("DOMContentLoaded", function() {
  var eGridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(eGridDiv, gridOptions);
});

<script src="https://unpkg.com/ag-grid/dist/ag-grid.js"></script>
<div id="myGrid" style="height: 100%;" class="ag-fresh"></div>

Answer 1

这是一个 plnkr 来演示以下内容：

function addRows (){
  gridOptions.api.insertItemsAtIndex(0, rowData);
  var rows = gridOptions.api.getModel().rowsToDisplay
  if (rows.length > 21){
    gridOptions.api.removeItems(rows.slice(-1));
    gridOptions.api.setFloatingBottomRowData([totalRow]);
  }
}
function removeRows(){
    var rowData = [];
    gridOptions.api.forEachNode( function(node) {
        rowData.push(node);
    });
    if (gridOptions.api.getFloatingBottomRowCount()){
      gridOptions.api.removeItems(rowData.slice(-3))
      if (rowData.length < 23){
        gridOptions.api.setFloatingBottomRowData([]);
        gridOptions.api.addItems([totalRow])
      }
    } else {
      gridOptions.api.removeItems(rowData.slice(-4,-1))
    }
}

基本上，您将需要在自己的实现中使用以下函数(全部来自gridOptions.api(：

• removeItems(<rowNodes>[]) - 输入是一个rowNodes数组，最好从getModel()获取这些节点并过滤掉你不想删除的那些

• setFloatingBottomRowData(<rowData>[]) - input 是一个对象数组，其设置与 rowData 中的设置相同

• addItems(<rowNodes>[])

• insertItemsAtIndex(insertIndex, <rowData>[])

有关这些功能的更多信息，请参阅文档的"插入和删除"和"浮动行"部分。

---

作为旁注，如果您从服务器获取数据，我可以认为这很有用，在这种情况下，您可能希望将检查显示行数的逻辑放在onGridReady中或将数据添加到网格中的位置。