-1

我想通过 web 服务将值列表从数据库绑定到 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 个值。kendoComboBox从 .asmx 页面绑定值有什么问题吗？

我必须kendoComboBox只显示值。

4

4 回答 4

1

正如我在剑道论坛上回答的那样，剑道组合框不会显示<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 也是一种选择，它会大大减少您的代码。

于 2012-11-29T20:24:10.537 回答
0

由于您已经“转换”了您select的 a 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循环之后）。

于 2012-11-29T09:04:24.957 回答
0

作为 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);
于 2012-11-29T09:25:06.467 回答
0

如果您可以使用 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
    });
});
于 2012-11-30T10:01:44.163 回答