json Kendo重新绑定下拉列表数据源

fumotvh3  于 2023-02-14  发布在  其他
关注(0)|答案(1)|浏览(174)

我有一段html,其中包含一组相当大的输入控件,这些控件是从服务器返回的一组JSON数据动态生成的。
HTML控件是从JSON数据以及与之关联的项构建的。
下拉列表选择项使用以下属性绑定:
data-bind='source: sourceObject'
data-text-field='optionText'
data-value-field='optionValue'
这是创建输入选择控件的javascript:

function CreateSelectList(label, i, name) {
    var element = '<select data-bind=\'source:reportFormData.FormField[' + i + '].Options.Option\' data-value-field=\'optionValue\' data-text-field=\'optionText\' id=\'' + name + '\' name=\'' + name + '\' data-role=\'dropdownlist\'></select>';
    return CreateFormField(label, element);
}
    • 问题:我需要有选择地修改其中一个下拉列表的数据源。我不知道如何通过编程更改数据源。**

这是行不通的:

var ddlData = $("#ddl_location").data("kendoDropDownList");
ddlData.setDataSource(jsonData.Option);

这也不是:

$("#ddl_location").kendoDropDownList({
    dataTextField: "optionText",
    dataValueField: "optionValue",
    dataSource: jsonData.Option
});

我也试过用以下名字来称呼这些:

ddlData.trigger("change");
ddlData.refresh();

jsonData.Option与原始JSON元素Report.FormField[i].Options.Option的格式相同,例如"Option": [ {"optionText": "All", "optionValue": "0"}, ...
这里的不同之处在于,它是需要替换原始数据源的新数据子集。
下面是最初创建控件时使用的完整JSON的摘录:

{
"Report": {
    "report_id": "1",
    "FormField": [{
        "description": "End DateTime Picker",
        "name": "end_date",
        "label": "End Date",
        "FieldType": "datepicker",
        "displayOrder": "2",
        "isRequired": "1",
        "requiredFieldValidationMessage": "End Date is required."
    },
    {
        "description": "Client",
        "name": "ddl_client",
        "label": "Client",
        "FieldType": "dropdownlist",
        "displayOrder": "3",
        "isRequired": "0",
        "Options": {
            "Option": [{
                "optionText": "All",
                "optionValue": "0"
            },
            {
                "optionText": "*Airport Business Center",
                "optionValue": "68955"
            },
            {
                "optionText": "*Cushman & Wakefield",
                "optionValue": "68996"
            },
            {
                "optionText": "*IBMC College ",
                "optionValue": "68804"
            }
            ...
    }
8ftvxx2r

8ftvxx2r1#

在数据源上使用read():

var ddlData = $("#ddl_location").data("kendoDropDownList");
ddlData.setDataSource(jsonData.Option);
ddlData.dataSource.read();

相关问题