使用 ag-Grid 为每一行添加唯一 id

Question

我在我的网格中使用了 javascript 中的 ag-Grid 插件。 我的问题是弄清楚如何将行更新到数据库中。 如何为每一行设置唯一 ID？

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

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

        // specify the data
        var rowData = [
            {make: "Toyota", model: "Celica", price: 'test', my_unique_id: '123'},
            {make: "Ford", model: "Mondeo", price: 32000, my_unique_id: '42341'},
            {make: "Porsche", model: "Boxter", price: 72000, my_unique_id: '567'}
        ];

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

Answer 1

在列的定义columnDefs您需要添加键，并根据需要设置hide: true ，此数据不会出现在UI上

 var columnDefs = [
            {headerName: "Make", field: "make"},
            {headerName: "Model", field: "model"},
            {headerName: "Price", field: "price"}, 
            {headerName: "Key", field: "my_unique_id", hide = true}, 
 ];

在此处查看有关ag-grid文档的列的所有属性： https : //www.ag-grid.com/javascript-grid-column-properties/

Answer 2

我不确定您是否知道这一点，但是当设置行数据时，ag-grid实际上为每行分配一个唯一的ID。

访问每个行节点的id的方法之一是使用ag-grid gridOptions API文档中指定的forEachNode()方法。 forEachNode()迭代所有行，并返回每一行的数据。

假设您使用的是Vanilla JavaScript（不使用任何框架，如React或Angular），则执行以下操作以获取id

 gridOptions.api.forEachNode(node => {
   console.log(node.id);
   // do the rest
 });

Answer 3

 {
    headerName: "Num",
    field: "id",
    filter: true,
    width: 150,
    cellRendererFramework:(params)=>{
      return <span>{params.rowIndex}</span>
    }
  },