Question

我想通过webservices从dataBase将一个值列表绑定到一个kendoCombobox。

以下是代码：

<select id = "CbxArea" style="width:200px">
</select>

$(document).ready(function () {
    var cmbArea = $("#CbxArea"),
        area;        
    cmbArea.kendoComboBox();  

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FlashReportWebService.asmx/GetAreaNames",
        dataType: "json",
        success: function (data) {
            for (i = 0; i < data.d.length; i++) {
                area = data.d[i].AreaName;
                cmbArea.append($("<option> </option>").val(area).html(area));
            }
        }
    });
});

值列表即将成功，但问题是只有第一个值显示在组合框中，其余值未显示（我在列表中有16个值）。

如果我写cmbArea;而不是cmbArea.kendoComboBox();，则共有16个值显示在comboBox中。 {。{1}}中是否存在来自.asmx页面的绑定值的问题？

我必须仅在kendoComboBox中显示值。

Answer 1

正如我在Kendo论坛中回复的那样，Kendo Combobox不会在原始<option>上显示<select>个元素。您需要在创建选项后初始化组合框：

$(document).ready(function () {
    var cmbArea = $("#CbxArea"),
        area;        


    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FlashReportWebService.asmx/GetAreaNames",
        dataType: "json",
        success: function (data) {
            for (i = 0; i < data.d.length; i++) {
                area = data.d[i].AreaName;
                cmbArea.append($("<option> </option>").val(area).html(area));


            }

            cmbArea.kendoComboBox(); 
        }
    });
});

使用Kendo DataSource也是一种选择，可以减少你的代码。

Answer 2

由于您已在select中“转换”了combobox，因此无法使用options直接填充组合框。如果要将新项添加到组合框，则应将这些项添加到dataSource：

var dataSource = cmbArea.data("kendoComboBox").dataSource;
for (i = 0; i < data.d.length; i++) {
    area = data.d[i].AreaName;
    dataSource.add({ text : area, value : area });
}

另一种方法是保持你select的营养，并在完成此操作后将其转换为组合框：你必须在成功回调结束时移动cmbArea.kendoComboBox();（之后） for循环）。

Answer 3

作为Samuel Caillerie建议的优化和避免调用dataSource.add这么多次，我建议建立一个包含所接收数据的数组，并调用dataSource一次：

var dataSource = cmbArea.data("kendoComboBox").dataSource;
var areas = [];
for (var i = 0; i < data.d.length; i++) {
    areas[i] = data.d[i].AreaName;
}
dataSource.data(areas);

Answer 4

如果您可以使用kendo数据源，则可以使用此功能。

$(document).ready(function () {
    var cmbArea = $("#CbxArea"),
        area;    
    cmbArea.kendoComboBox({
    dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "FlashReportWebService.asmx/GetAreaNames",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "POST"
            }
        },
        dataTextField: "text", //Your Text value in JSON payload
        dataValueField: "value" //Your Value value in JSON payload
    });
});

使用kendoComboBox时，列表值不会从webservice绑定到kendoComboBox

4 个答案: