Question

我有一个包含两个值的Kendo组合框：Main，Secondary。我还有一个链接到数据源的Kendo mutliselect。默认情况下，组合框显示“Main”，多选显示“Parent1”，“Parent2”，即数据源的“Name”字段。

如果用户从组合框中选择“辅助”，我想动态地将multiselect的dataTextField更改为Name2，类似地，当用户从中选择“Main”时，multiselect应链接到“Name”作为其dataTextField下降。

以下是Fiddle

HTML

<select id="CategoryOption" style="width: 100px;">
<option>Main</option>
<option>Secondary</option>
</select> <br><br><br><br><br><br>
<select id="MainCategory" style="width: 90%;"></select>

Java脚本

createCategoryOption("#CategoryOption");
createMainCategory("#MainCategory", "Name", "ID");
function createCategoryOption(divID1)
{
$(divID1).kendoComboBox({
        change: function (e) {
            SetSelectServicesText();
        }
    });
}
function createMainCategory(usersDiv, textField, valueField) {
 $("#MainCategory").kendoMultiSelect({
    dataSource: [
        { Name: "Parent1", Id: 1, Name2: "Child1" },
        { Name: "Parent2", Id: 2, Name2: "Child2" }
    ],
    dataTextField: textField,
    dataValueField: valueField
});
}
function SetSelectServicesText()
{
        if($("#CategoryOption").data("kendoComboBox").value() == "Main")
        {
            $("#MainCategory").destroy();
        createMainCategory("#MainCategory", "Name", "ID");
        }
        else
        {
            $("#MainCategory").destroy();
        createMainCategory("#MainCategory", "Name2", "ID");
        }
}

外部来源

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>

Answer 1

Kendo小部件通常会在目标元素周围创建一个包装结构，不会>被方法destroy()销毁（我觉得这很糟糕）的东西）。

因此，破坏（或从DOM中删除）小部件并不那么简单。看看：

function createMainCategory(usersDiv, textField, valueField, remove) { var mc = $("#MainCategory"); if (remove) { // Destroys the widget mc.data("kendoMultiSelect").destroy(); // Get the widget wrapper element structure var p = mc.closest(".k-widget"); // Detache the #MainCategory from the wrapper structure mc = mc.empty().detach(); // Remove the wrapper structure p.remove(); // Append the #MainCategory to the body again $('body').append(mc); } $("#MainCategory").kendoMultiSelect({ dataSource: [ { Name: "Parent1", Id: 1, Name2: "Child1" }, { Name: "Parent2", Id: 2, Name2: "Child2" } ], dataTextField: textField, dataValueField: valueField }); }

如您所见，在删除块中...

使用内置方法destroy();
销毁小部件
然后选择包含所有结构的主要包裹元素;

在删除它之前，它选择并detaches #MainCategory 外部包装器（detach()删除但返回其引用以进一步操作元素） ;

因此，使用#MainCategory安全，removes来自DOM的包装器整个结构;

最后再次在主体上添加#MainCategory以用于托管新的小部件。

Fiddle

动态更改Kendo MultSelect的DataTextField

1 个答案: