基于ID获取数据（Kendo UI数据源）：双数据源关联方案咨询

下面是几种可行的实现方案，根据你的业务场景选择：

方法1：监听datasource1的read事件传递Id #

当datasource1完成数据读取后，提取返回数据中的Id，动态配置datasource2的请求参数并触发读取：

// 先定义datasource2的基础结构
const imageDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "你的图片接口地址",
            type: "GET"
        }
    }
});

// 监听datasource1的read完成事件
editDataSource.one("read", function(e) {
    // 假设datasource1返回单条数据，取第一条的Id（若为多条，根据实际逻辑调整）
    const targetId = e.response[0].Id;
    // 给datasource2的请求添加Id参数
    imageDataSource.transport.read.data = {
        templateId: targetId // 参数名和后端接口保持一致
    };
    // 触发图片数据读取
    imageDataSource.read();
});

// 启动datasource1的数据加载
editDataSource.read();

方法2：在datasource2的requestStart事件中动态注入Id #

每次datasource2发起请求前，自动从datasource1中获取当前Id并添加到请求参数：

const imageDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "你的图片接口地址",
            type: "GET"
        }
    },
    requestStart: function(e) {
        // 获取datasource1当前的数据项（示例取第一条，可根据实际场景调整）
        const currentDataItem = editDataSource.data()[0];
        if (currentDataItem?.Id) {
            // 注入请求参数
            e.sender.transport.options.read.data.templateId = currentDataItem.Id;
        }
    }
});

// 调用read时自动携带Id参数
imageDataSource.read();

方法3：结合UI组件事件传递Id #

如果datasource1绑定到了Kendo UI组件（如Grid、Form），可通过组件的交互事件（如选中、数据绑定完成）获取Id：

以Grid组件为例：

$("#templateGrid").kendoGrid({
    dataSource: editDataSource,
    columns: ["Id", "Code", "Subject"],
    change: function(e) {
        // 获取选中行的数据项
        const selectedItem = this.dataItem(this.select());
        if (selectedItem) {
            // 更新datasource2参数并读取图片
            imageDataSource.transport.read.data = { templateId: selectedItem.Id };
            imageDataSource.read();
        }
    }
});

关键注意点 #

• 确保datasource1的数据已加载完成后再触发datasource2的读取，避免Id为空；
• 参数名称要和后端接口定义一致；
• 若图片返回二进制流，需调整请求处理逻辑，比如用fetch请求后通过URL.createObjectURL转换为可展示的图片地址。

内容的提问来源于stack exchange，提问作者nick glav