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

【问题标题】：Add unique id to every row using ag-Grid使用 ag-Grid 为每一行添加唯一的 id
【发布时间】：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>

【问题讨论】：

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

标签： javascript html ag-grid

【解决方案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>
    }
  },

【讨论】：

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