KnockoutJS 和 AG-Grid 示例

Question

我一直在尝试了解 ag-grid 和 knockout 的组合，了解它们的工作原理。

我搜索了很多但找不到任何最佳示例。所以想在这里问问题是否有 knockout js 和 AG-Grid 的文档可用？

我已经创建了示例，但它不适用于 Observable rowData：JSFiddle

Answer 1

我不知道有任何关于与 Knockout JS 集成的官方文档，但这里是解决添加新行问题的方法。

本质上，当您向 this.rowData 可观察对象添加新行时，它不一定会被推入网格。因此您需要调用 gridOptions.api.setRowData 以便更新网格以显示新数据集。这是 documentation for that. Here's the updated fiddle。

this.addRow = function() {
   this.rowData.push({
      make: "Toyota",
      model: "Celica",
      price: 35000
   });

   self.gridOptions().api.setRowData(self.rowData());
}

如果您想稍微改进一下，可以在 this.rowData 上订阅更改，然后通过订阅事件处理程序调用 gridOptions.api.setRowData。像这样：

self.rowData.subscribe(function(newValue){
    self.gridOptions().api.setRowData(newValue);
});

这是基于订阅事件的逻辑的更新 fiddle：https://jsfiddle.net/2dcd0arj/6/

更新

我刚刚意识到有一个update API for this as well. It allows you to add/update/remove rows without having to set the dataset again. Basically, you need to provide the object of the new row being added to the gridOptions.api.updateRowData function. Here's how your addRow function needs to be updated for this. Here's the link to updated fiddle。

self.addRow = function() {
    var newRow = {
      make: "Toyota",
      model: "Celica",
      price: 35000
    };

    self.rowData.push(newRow);
    var res = self.gridOptions().api.updateRowData({add: [newRow]});
    console.log("New row added: ", res);
};

您可以更进一步 create a component or a binding handler 为此。

KnockoutJS 和 AG-Grid 示例

KnockoutJS and AG-Grid Sample

knockout.js

ag-grid

更新