Kendo ui Kendo UI使用外键从数据源获取数据

欢迎大家,

假设我有一个网格。但是在

columns>field

values:categories

中，我想从数据源（下面）获取数据并显示到dropdownlist中。如何实现这种方法

var categories = new kendo.data.DataSource({
transport: {
    read: {
        url: "./getCategories.php",
        type: "POST"
    }
},
});

输出结果是这样的

[{"categoriesID":"92","categoriesName":"BOOKING"},
{"categoriesID":"1","categoriesName":"SYSTEM"},
{"categoriesID":"57","categoriesName":"SYSTEM1"},
{"categoriesID":"2","categoriesName":"SYSTEM2"},
{"categoriesID":"55","categoriesName":"TEST"},
{"categoriesID":"56","categoriesName":"TRY"}]

---

p/s:my category列将显示categoriesID，但我希望显示categoriesName

我假设您询问的是编辑器模板。如果需要自定义控件而不是网格提供的默认编辑器，则应使用。 编辑器模板将该值映射回模型类别Id

如果希望列显示它映射到的值以外的其他值，还应该使用列的属性。在本例中，网格列映射到类别Id，但您希望显示类别名称

<div id="grid"></div>
<script>

var ProductDataSrc = [
{"ProductID":"3" , "categoriesID":"56","categoriesName":"TRY"},
{"ProductID":"6" , "categoriesID":"55","categoriesName":"TEST"},
{"ProductID":"2" , "categoriesID":"92","categoriesName":"BOOKING"},
{"ProductID":"62" , "categoriesID":"1","categoriesName":"SYSTEM"},
{"ProductID":"23" , "categoriesID":"2","categoriesName":"SYSTEM2"},
{"ProductID":"12" , "categoriesID":"57","categoriesName":"SYSTEM1"} ];


var categoryDataSrc = [
{"categoriesID":"92","categoriesName":"BOOKING"},
{"categoriesID":"1","categoriesName":"SYSTEM"},
{"categoriesID":"57","categoriesName":"SYSTEM1"},
{"categoriesID":"2","categoriesName":"SYSTEM2"},
{"categoriesID":"55","categoriesName":"TEST"},
{"categoriesID":"56","categoriesName":"TRY"}];


$("#grid").kendoGrid({
  columns: [ {
    field: "categoriesID", title:"Category",
    template: "<strong>#: categoriesName # </strong>",
    editor: function(container, options) {
     var input = $("<input/>");
     input.attr("name", options.field);
     input.appendTo(container);
     input.kendoDropDownList({
       dataValueField:  "categoriesID",
       dataTextField: "categoriesName",
       dataSource: categoryDataSrc
     });
    }  
  },
  { command: ["edit", "destroy"] }],
  dataSource: ProductDataSrc,
  editable: "inline"
});
</script>

var ProductDataSrc=[
{“ProductID”：“3”，“categoriesID”：“56”，“categoriesName”：“TRY”}，
{“ProductID”：“6”，“categoriesID”：“55”，“categoriesName”：“TEST”}，
{“ProductID”：“2”，“categoriesID”：“92”，“categoriesName”：“BOOKING”}，
{“ProductID”：“62”，“categoriesID”：“1”，“categoriesName”：“SYSTEM”}，
{“ProductID”：“23”，“categoriesID”：“2”，“categoriesName”：“SYSTEM2”}，
{“ProductID”：“12”，“categoriesID”：“57”，“categoriesName”：“SYSTEM1}]；
变量categoryDataSrc=[
{“categoriesID”：“92”，“categoriesName”：“BOOKING”}，
{“categoriesID”：“1”，“categoriesName”：“SYSTEM”}，
{“categoriesID”：“57”，“categoriesName”：“SYSTEM1”}，
{“categoriesID”：“2”，“categoriesName”：“SYSTEM2”}，
{“categoriesID”：“55”，“categoriesName”：“TEST”}，
{“categoriesID”：“56”，“categoriesName”：“TRY”}]；
$（“#网格”）.kendoGrid({
列：[{
字段：“分类ID”，标题：“分类”，
模板：“：分类名称””，
编辑器：函数（容器、选项）{
变量输入=$（“”）；
input.attr（“name”，options.field）；
输入。附加到（容器）；
input.kendoDropDownList({
dataValueField:“分类ID”，
dataTextField:“分类名称”，
数据源：categoryDataSrc
});
}  
},
{命令：[“编辑”、“销毁”]}，
数据源：ProductDataSrc，
可编辑：“内联”
});

感谢您的回复，我尝试复制我的当前情况。但我不知道如何使其在列中显示categoriesName。我尝试使用模板，但它只是使它变得最糟糕。它仅在编辑时出现。@Nixoderm您的网格数据源应获取要在网格列中显示的外键文本值，因此您必须更改数据源模型以包含类别名称。我已经更新了上面的脚本供您参考。