Question

我从webservice查询（_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();

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

Answer 1

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

将DropDownList定义为：

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

请记住，dataTextField并非严格必须是字段，可能是路径到该字段。

HTML的位置：

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

Answer 2

对于您的下拉配置，您的部分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; 
        }
    }

Answer 3

 $("#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喜欢：[ {＆＃34;下拉＆＃34;：＆＃34;值1＆＃34;}， {＆＃34;下拉＆＃34;：＆＃34;值2＆＃34;} ]`

正确绑定json与Kendo DropDownList

3 个答案: