如何使用来自对象而不是来自 ajax 请求的 kendo 数据源更新来刷新表答案

【问题标题】：How to Refresh table with kendo datasource updates from object, not from ajax request如何使用来自对象而不是来自 ajax 请求的 kendo 数据源更新来刷新表
【发布时间】：2021-09-14 22:20:01
【问题描述】：

我有一个问题，当我使用 kendo 将数据绑定到表时，我使用的是 kendo.data.DataSource 对象，并且我正在绑定到如下表：

    <table class="myClass" id="myTable">
        <thead>
            <tr>
                <th data-bind="visible:Name">Name.Title"</th>
                <th data-bind="visible:Type">Type.Title"</th>
                <th data-bind="visible: DateAdded">"CreatedDate.Title"</th>
            </tr>
        </thead>
        <tbody id="contactsListView" data-role="listview"
               data-bind="source: ListViewSource"
               data-template="Template"></tbody>
    </table>

在 JS 上我是这样填充的：

ListViewSource: new kendo.data.DataSource({
    serverPaging: true, // <-- Do paging server-side.
    serverSorting: true, // <-- Do sorting server-side.
    transport: {
        read: {
            data: function () {
                  return globalVariableWithObjectList;
            }
        }
    },
    schema: {
        data: function () {
            return globalVariableWithObjectList;
        }
    }
}),

它适用于第一次加载时填充表格，但如果我通过某些操作添加或删除一个元素，它不会在表格上刷新。我正在尝试刷新：

ListViewSource.read();

当我有这样的 kendo.data.DataSource 时它可以工作：

contactsListViewSource: new kendo.data.DataSource({
    serverPaging: true, // <-- Do paging server-side.
    serverSorting: true, // <-- Do sorting server-side.
    transport: {
        read: {
            url: myUrl,//Where I'm getting the data
            dataType: "json",
            type: "POST"
        }
    },
    pageSize: 5,
    sort: { field: "CreatedDate", dir: "desc" },
    schema: {
        data: function () {
            return globalVariableWithObjectList;
        }
    }
}),

当需要更新多个数据时，我试图减少 ajax 多次调用，并将数据存储在全局变量中，以便我以后可以使用它们。但是 kendo.data.DataSource 的 read() 函数仅在它调用 ajax 请求时刷新表数据，而不是在我尝试从全局变量中获取数据时刷新表数据，有谁知道如何在读取变量时使其工作?

【问题讨论】：

标签： javascript kendo-ui kendo-asp.net-mvc

【解决方案1】：

使用contactsListViewSource.add(newRecord);向数据源添加新记录，它会自动绑定到HTML列表（MVVM）并显示出来。

调用contactsListViewSource.sync() 将数据发送到服务器。如果添加了新记录，contactsListViewSource.sync() 将调用 transport.create 方法。

工作示例：ListView MVVM

【讨论】：