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设置为该数据不会出现在用户界面上

 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 documentation中指定的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>
    }
  },

使用ag-Grid向每行添加唯一ID

3 个答案: