javascript - 如何在 Kendo UI Combobox 中手动将项目添加到数据源中

Question

我有一个组合框，它由从 servlet 接收到的 JSON 字符串填充。

$(document).ready(function() {
    //Combobox Init (From Servlet)
    var comboBoxDataSource = new kendo.data.DataSource({
        transport : {
            read : {
                url : "net/samso/action/common/ComboAction?flag=SRCHGT_IO_GB", // url to remote data source 
                dataType : "json",
                type : 'GET'
            }
        },
        schema : {
            model : {
                fields : {
                    key : {
                        type : "string"
                    },
                    value : {
                        type : "string"
                    }
                }
            }
        }
    });

    //Manually add an item
    comboBoxDataSource.add({key: "062", value: "Total"});

    //Initialize Combobox
    $("#cb_srchgt_io_gb").kendoComboBox({
        dataSource : comboBoxDataSource,
        dataTextField : "value",
        dataValueField : "key"
    })
});

代码工作正常，直到我尝试手动将项目添加到数据源 comboBoxDataSource.add({key: "062", value: "Total"});。添加项目时，它会删除从数据源中的 JSON 数据填充的其他项目。

为什么会这样？

Answer 1

问题是 DataSource 是异步初始化的，我的意思是，您在 combobox 初始化时开始加载，但直到从服务器接收回数据后操作才完成。然后，也只有那时，才是您应该调用该元素的时间。将 add 语句移动到示例代码的末尾甚至是 Not Acceptable ，因为从服务器加载可能需要几毫秒或几秒。

如果你想向从服务器接收到的内容添加一个元素，你可以使用:

$(document).ready(function () {
    //Combobox Init (From Servlet)
    var comboBoxDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url     : "net/samso/action/common/ComboAction?flag=SRCHGT_IO_GB", // url to remote data source 
                dataType: "json",
                type    : 'GET'
            }
        },
        schema   : {
            model: {
                fields: {
                    key  : { type: "string" },
                    value: { type: "string" }
                }
            },
            data: function(result) {
                //Manually add an item
                result.push({key: "062", value: "Total"});
                return result
            }
        }
    });

    //Initialize Combobox
    $("#cb_srchgt_io_gb").kendoComboBox({
        dataSource    : comboBoxDataSource,
        dataTextField : "value",
        dataValueField: "key"
    })
});

您可以使用 requestEnd 事件并将额外元素推送到 e.response 来做同样的事情:

requestEnd: function (e) {
    console.log("e", e);
    e.response.push({key: "062", value: "Total"});
}

基本上，从服务器接收到数据后触发的任何事件都可以。