如何无需AJAX请求通过对象更新Kendo DataSource刷新表格

你当前的配置存在两个核心问题：

• 开启了serverPaging、serverSorting两个服务端处理参数，这两个参数是为AJAX请求服务端分页/排序场景设计的，本地数据操作场景下无需开启，会干扰本地数据的刷新逻辑
• transport.read配置不符合本地数据源的要求：你当前配置的data属性仅用于AJAX请求时传递参数，没有定义本地数据读取的回调逻辑，导致read()方法调用时无法触发完整的数据源更新、视图重绘流程

方案1：调整DataSource配置后调用read()刷新 #

修改你的DataSource配置如下：

ListViewSource: new kendo.data.DataSource({
    // 本地数据场景关闭服务端分页、排序
    serverPaging: false,
    serverSorting: false,
    pageSize: 5,
    sort: { field: "CreatedDate", dir: "desc" },
    transport: {
        // read配置为函数，手动触发读取完成回调
        read: function(options) {
            // 把全局变量的数据传入success回调，触发后续schema解析
            options.success(globalVariableWithObjectList);
        }
    },
    schema: {
        // 可以保留data解析逻辑，也可以直接在read的success里返回处理后的数据
        data: function(response) {
            return response;
        }
    }
}),

后续你修改完globalVariableWithObjectList的内容后，只需要调用ListViewSource.read()即可自动刷新绑定的表格。

方案2：直接替换数据源（更简便） #

如果不需要复用DataSource的分页、排序逻辑处理，你甚至不需要调整原有配置，修改完全局变量后直接调用data方法替换数据源即可触发刷新：

// 修改完globalVariableWithObjectList后执行以下代码
ListViewSource.data(globalVariableWithObjectList);

该方法会直接替换DataSource内部存储的数据集，自动通知绑定的视图组件完成重绘，无需调用read方法。

内容的提问来源于stack exchange，提问作者Mauricio Navarro