基于条件切换Kendo Grid DataSource时backupDataSource为null求助

首先咱们来拆解问题：Kendo的DataSource构造函数只有在初始化过程中发生未捕获错误时才会返回null，而你给backupDataSource设置的error回调是空的，导致你看不到具体的错误信息。接下来一步步排查和解决：

1. 先定位backupDataSource初始化失败的原因 #

给backupDataSource的error回调加上日志，就能看到到底哪里出问题了：

var backupDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/MyController/MyAction1",
            dataType: "json",
            data: { ID : "1" },
        }
    },
    change: function (e) {},
    // 添加错误日志，方便排查问题
    error: function (e) {
        console.error("backupDataSource初始化/读取错误:", e);
    },
    pageSize: 10,
    schema: {
        model: {
            fields: {
                Id: { type: "number" },
                Date: { type: "date" },
                Name: { type: "string" }
            },
        }
    }
});

常见的出错原因包括：

• /MyController/MyAction1接口不存在，或返回500/404这类错误状态码
• 接口返回的JSON格式不符合你定义的schema（比如缺少字段、字段类型不匹配）

2. 优化DataSource切换的逻辑 #

就算两个DataSource都初始化成功，你当前的代码也只能在Grid首次初始化时设置一次数据源。如果之后flag值改变，Grid不会自动切换。正确的切换方式是调用Grid的setDataSource方法：

// 当需要切换flag时执行这段代码
flag = 0; // 假设切换为0
var grid = $("#campaign-queue").data("kendoGrid");
grid.setDataSource(flag == 1 ? originalDataSource : backupDataSource);
grid.dataSource.read(); // 强制重新读取新数据源的数据

3. 更简洁的方案：复用单个DataSource #

其实你完全不需要维护两个几乎一模一样的DataSource，可以动态修改transport.read的配置，这样代码更简洁，也能减少出错概率：

var flag = 1;
// 只创建一个DataSource实例
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            // 动态返回对应接口的URL
            url: function() {
                return flag == 1 ? "/MyController/MyAction2" : "/MyController/MyAction1";
            },
            dataType: "json",
            data: { ID : "1" }
        }
    },
    change: function (e) {},
    error: function (e) {
        console.error("DataSource错误:", e);
    },
    pageSize: 10,
    schema: {
        model: {
            fields: {
                Id: { type: "number" },
                Date: { type: "date" },
                Name: { type: "string" }
            }
        }
    }
});

// 初始化Grid
$("#campaign-queue").kendoGrid({
    dataSource: dataSource,
    filterable: true,
    sortable: true,
    columns: [
        { field: "Id", width: 55, filterable: { search: true, extra: false } },
        { field: "Name", width: 143, filterable: { extra: false } }
    ],
    pageable: { previousNext: true, pageSize: 10 }
});

// 封装切换数据源的函数
function toggleDataSource(newFlag) {
    flag = newFlag;
    $("#campaign-queue").data("kendoGrid").dataSource.read();
}

这样每次调用toggleDataSource改变flag后，只需要调用read()就能自动从新接口获取数据，无需维护两个DataSource实例。

内容的提问来源于stack exchange，提问作者Senjuti Mahapatra