如何将行号显示为第一列？ [英] How to show row number as the first column?

问题描述

就像这样（但从1开始）：

It's like this (but start from 1):

请注意，该数字用于网格的行元素，而不是源的行数据。因此，无论行数据和排序标准如何，每行第一个单元格中显示的数字都应指示当前行的位置（从第一行的1开始）。

Please note the number is for the row element of grid instead of row data of the source. So the number shown in the first cell of each rows should indicate the position of the current row (which starts from 1 for the first row) regardless the row data and the sorting criteria.

更新：结果是这样的： https://jsfiddle.net/wp6o350z/

Update: The result is like this: https://jsfiddle.net/wp6o350z/

<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css">

<div id="myGrid" style="height: 200px;width:500px;" class="ag-theme-balham"></div>

<script type="text/javascript" charset="utf-8">
    // specify the columns
    var columnDefs = [
      {headerName: "#", field: "row", width: 30 },
      {headerName: "Make", field: "make", width: 100 },
      {headerName: "Model", field: "model", width: 100},
      {headerName: "Price", field: "price", width: 100}
    ];

    // specify the data
    var rowData = [
      {row: 1, make: "Toyota", model: "Celica", price: 35000},
      {row: 2, make: "Ford", model: "Mondeo", price: 32000},
      {row: 3, make: "Porsche", model: "Boxter", price: 72000},
      {row: 4, make: "Toyota", model: "Celica", price: 35000},
      {row: 5, make: "Ford", model: "Mondeo", price: 32000},
      {row: 6, make: "Porsche", model: "Boxter", price: 72000},
      {row: 7, make: "Toyota", model: "Celica", price: 35000},
      {row: 8, make: "Ford", model: "Mondeo", price: 32000},
      {row: 9, make: "Porsche", model: "Boxter", price: 72000}
    ];

    // let the grid know which columns and what data to use
    var gridOptions = {
      columnDefs: columnDefs,
      rowData: rowData,

    };

  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

  // create the grid passing in the div to use together with the columns & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);

</script>

此示例中的问题是：

1. 行号是在数据中定义的，在实际情况下不支持。维护行是困难且缓慢的，因为从头开始插入将需要更新许多行。


2. 由于行号是在数据中定义的，因此排序后您将看不到行号是随机的。我仍然希望看到行号从头开始从1开始。

基本上，成为网格功能的一部分较为容易，并且许多其他网格（不限于JS网格）也支持此功能。我想知道使用ag-grid是否容易。

Basically it's easier to be part of the grid feature, and many other grids (not limited to JS grids) support this. I'm wondering if it's easy to do it in with ag-grid.

推荐答案

Ag-grid现在有了 valueGetter对于带有表达式的单元格，因此您可以使用

Ag-grid now has a "valueGetter" for cells that takes an expression, so you can just use

columnDefs: [
  {
    headerName: "Row",
    valueGetter: "node.rowIndex + 1"
  },
  (other columns)
]

要使其在排序后刷新，您需要调用refreshCells：

In order to have it refresh after sorting, you need to call refreshCells:

onSortChanged(e: AgGridEvent) {
  e.api.refreshCells();
}

如果要过滤，则可以对 filterChanged执行相同的操作事件。

If you are filtering, you would do the same thing on the 'filterChanged' event.

这篇关于如何将行号显示为第一列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！