JSON对剑道的DropDownList适当的结合(Proper binding of json t

2019-10-18 21:53发布

我有一个Web服务查询(_urlTowns)以下JSON数据(见下文)。 我想绑定一个剑道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等:[{ “下拉菜单”: “值1”},{ “下拉菜单”: “值2”}]`


文章来源: Proper binding of json to Kendo DropDownList