将 json 正确绑定到 Kendo DropDownList

Proper binding of json to Kendo DropDownList

本文关键字：Kendo DropDownList 绑定 json      更新时间：2023-09-26

我有来自网络服务查询（_urlTowns）的以下json数据（见下文）。我想将剑道 UI 下拉列表控件绑定到此数据源城镇。

{
"displayFieldName": "TNONAM",
"fieldAliases": {
    "TNONAM": "TNONAM"
},
"fields": [{
    "name": "TNONAM",
    "type": "esriFieldTypeString",
    "alias": "TNONAM",
    "length": 16
}],
"features": [{
    "attributes": {
        "TNONAM": "ANSONIA"
    }
}, {
    "attributes": {
        "TNONAM": "BETHANY"
    }
}, {
    "attributes": {
        "TNONAM": "BRANFORD"
    }
}, {
    "attributes": {
        "TNONAM": "WOODBRIDGE"
    }
}]}
// Towns data source
var dataSourceTowns = new kendo.data.DataSource({
transport: {
    read: {
        url: _urlTowns,
        dataType: "json",
        type: 'GET'
    }
},
schema: {
    data: "features"
}});dataSourceTowns.read();

我需要设置模型属性吗？因为我正在用"TNONAM"中的dataTextValue填充DDL。猜猜我混淆了"功能"和"属性"。

也许你的JSON对于DropDownList来说不是最方便的，但你可以将其绑定到KendoDropDownList，而无需更改。

将下拉列表定义为：

$("#dropdown").kendoDropDownList({
    dataSource    : dataSourceTowns,
    dataTextField : "attributes.TNONAM"
});

请记住，dataTextField严格来说不一定是字段，可能是字段的路径。

您的 HTML 在哪里：

<select id="dropdown"></select>

对于下拉配置，部分 json 需要： 

"features": [{"TNONAM": "ANSONIA"}, 
             {"TNONAM": "BETHANY"},
             {"TNONAM": "BRANFORD"},
             {"TNONAM": "WOODBRIDGE"}]

如果 json 响应严格需要如此，那么您可能需要解析响应数据，例如：

schema: {
        data: function(response) {
            var responsedata = response.features;
            var parsedjson =  []; //use responsedata to make json structure like above
            return parsedjson; 
        }
    }

 $("#dropDownList1").kendoDropDownList({
            optionLabel: "Select dropdown",
            dataTextField: "dropdown",
            dataValueField: "dropdown",
            dataSource: {
                type: "json",
                transport: {
                    read: {url: "dropdown.json",
                        type: "GET",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"
                    }
                }
            },
            schema: {
             data: function(data) {
             alert(JSON.stringify(data));
             return eval(data);
             }
             },
  • 下拉菜单.json 喜欢 ：[{"下拉列表"："值 1"}，{"下拉列表"："值 2"}]`
相关文章：