javascript 将 json 正确绑定到 Kendo DropDownList

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19764314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 16:43:19  来源:igfitidea点击:

Proper binding of json to Kendo DropDownList

javascriptjsonkendo-uijsonp

提问by ripsin

I have the following json data (see below) from a webservice query (_urlTowns). I want to bind a Kendo UI dropdownlist control to this datasourceTowns.

我有来自网络服务查询 (_urlTowns) 的以下 json 数据(见下文)。我想将 Kendo UI 下拉列表控件绑定到这个 datasourceTowns。

{
"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();

Do I need to set a model attribute? As I'm after populating the DDL with the dataTextValue from "TNONAM". Guess I'm confusing the "features" and "attributes".

我需要设置模型属性吗?正如我在使用“TNONAM”中的 dataTextValue 填充 DDL 之后。猜猜我混淆了“功能”和“属性”。

回答by OnaBai

Maybe your JSON is not the most convenient for a DropDownList but you can bind it to a KendoDropDownList with no change.

也许您的 JSON 对于 DropDownList 来说不是最方便的,但您可以将它绑定到 KendoDropDownList 而不做任何更改。

Define the DropDownList as:

将 DropDownList 定义为:

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

Remember that dataTextFielddoesn't strictly have to be a field, might be pathto the field.

请记住,dataTextField严格来说不一定是一个字段,可能是该字段的路径

Where your HTML is:

你的 HTML 在哪里:

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

回答by Bishnu Rawal

For your dropdown configuration, part of your json need to be:

对于您的下拉配置,您的 json 的一部分需要是:

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

If json response strictly need to be that, then you may have to parse response data like:

如果严格需要 json 响应,那么您可能必须解析响应数据,例如:

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

回答by Bishnu Rawal

 $("#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);
             }
             },   
  • dropdown.json like :[ {"dropdown":"value 1"}, {"dropdown":"value 2"} ]`
  • dropdown.json 喜欢:[ {"dropdown":"value 1"}, {"dropdown":"value 2"} ]`