Question

问候所有

假设我有一个网格like this。但是在columns>field values: categories中，我想从数据源（下）中获取数据并显示到下拉列表中。如何实现这种方法？

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：我的类别列将显示CategoriesID，但我想显示categoryName

Answer 1

我假设您正在询问有关编辑器模板的信息。当您想要自定义控件而不是默认编辑器时，网格会提供您应该使用editor property of column。编辑器模板会将值映射回您的模型类别ID。

如果您希望该列显示与其映射到的值不同的其他值，则应使用该列的client template属性。在您的情况下，网格列映射到类别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>

Kendo UI使用外键从dataSource获取数据

1 个答案: