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

Posted 2023-03-28

【中文标题】使用 ag-Grid 为每一行添加唯一的 id

【英文标题】：Add unique id to every row using ag-Grid

【发布时间】：2019-11-14 06:29:35

【问题描述】：

我在我的网格中使用了 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>

【问题讨论】：

你试过什么？这个脚本应该在 内吗？

【参考方案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/

【参考方案2】：

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

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

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

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

【参考方案3】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。