在 ag-Grid 中添加行

ag-Grid 是一个流行的 JavaScript 表格和数据网格库，可用于构建丰富的 Web 应用程序。在 ag-Grid 中，添加行是非常简单的。本文将为您介绍如何使用它来添加新的行到您的表格中。

步骤

1. 首先，创建一个数组对象。数组中的每个对象都应该有表格中的一行数据，每个属性表示单元格的数据。

   const rowData = [
     { make: 'Toyota', model: 'Celica', price: 35000 },
     { make: 'Ford', model: 'Mondeo', price: 32000 },
     { make: 'Porsche', model: 'Boxter', price: 72000 }
   ];
   

2. 在你的 HTML 页面中，添加一个 div 元素。这个元素将在以后成为 ag-Grid 表格的容器。

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

3. 在你的 JavaScript 代码中，使用 ag-Grid 来创建一个新的数据表。在这个表格中，指定 rowData 作为数据源。

   const gridOptions = {
     columnDefs: [
       { field: 'make' },
       { field: 'model' },
       { field: 'price' }
     ],
     rowData: rowData
   };
   
   const gridDiv = document.querySelector('#myGrid');
   new agGrid.Grid(gridDiv, gridOptions);
   

4. 现在我们已经有了一个表格，并向其中添加了一些数据。以下代码将向数据源中添加一个新的行。

   const newRowData = { make: 'BMW', model: 'M5', price: 93000 };
   rowData.push(newRowData);
   
   const gridApi = gridOptions.api;
   gridApi.updateRowData({ add: [newRowData] });
   

   首先，我们先定义一个 newRowData 作为要添加的新行。然后我们将这个新行加到 rowData 数组中。最后，我们使用 Grid API 中的 updateRowData 方法告诉 ag-Grid 我们已经添加了一行。

5. 运行您的代码，您现在应该可以看到表格中的新行了。

结论

以上就是在 ag-Grid 中添加行的步骤。您可以使用相同的方法添加任意数量的新行，只要将它们添加到rowData数组中。注意，我们使用 gridApi.updateRowData() 方法来告诉 ag-Grid 哪些行需要更新或添加。我们还应该注意， ag-Grid 具有许多其他强大的功能，例如排序和过滤。有了这些工具，您可以构建出非常复杂的表格，从而提供更好的用户体验。