数据更改时kogrid不更新列

Question

我有这样的简单数据：

var dataFromAjax = [
     {Id : 1, Name : "Yoza", Status : 1},
     {Id : 2, Name : "Dhika", Status : 1}
];

来自 ajax 的下一个数据将具有不同的架构。像这样：

var nextData = [
    {Id : 1, Name : 'Yoza', Job : 'Programmer', Phone : '08788'},
    {Id : 1, Name : 'Dhika', Job : 'Designer', Phone : '99987922'}
]

在我的一段代码中：

self.Data = ko.observableArray();
self.Data(nextData);
self.Data.valueHasMutated();

问题是列未更新。列仍然与第一个模式相同，即 id、name 和 status。作业和电话未呈现。如何渲染不同的架构？

Answer 1

您需要将 observableArray columnDefs 传递给您的 koGrid 绑定以使其更改。请参阅他们的文档here。

喜欢：

HTML 绑定：

<div data-bind="koGrid: {data: Data, columnDefs: columns}"></div>

视图模型（仅部分）：

self.columns = ko.computed(function(){
    var cols = Object.keys(self.Data()[0]);
    return cols.map(function(col){
        return {
            field: col
        };
    });
});

您可以定义如何创建columns，只要它返回带有field 对象的对象数组即可。 （有关更多信息，请参阅上面的文档）

我创建了一个缩小的小提琴here，以根据您的数据提供一些示例。 1秒后数据会发生变化（这只是为了测试）。