动态更改 Kendo MultiSelect 的 DataTextField答案

【问题标题】：Changing DataTextField of Kendo MultSelect dynamically动态更改 Kendo MultiSelect 的 DataTextField
【发布时间】：2015-04-30 16:33:41
【问题描述】：

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

如果用户从组合框中选择“辅助”，我想将多选的 dataTextField 动态更改为 Name2，同样，当用户从下拉。

这里是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>

【问题讨论】：

标签： javascript jquery kendo-ui kendo-combobox kendo-multiselect

【解决方案1】：

Kendo 小部件通常会在目标元素周围创建一个 wrapper 结构，该结构不会被 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
    });
}

如你所见，在 remove 中阻止它...

使用内置方法destroy()销毁小部件；
然后它选择包含所有结构的主包装元素；
在删除它之前，它会选择 detaches #MainCategory 在包装器之外（detach() 删除但返回其引用以进一步操作元素）；
所以，有了#MainCategory 安全，它removes 将整个结构从DOM 包装起来；
最后在 body 上再次添加了#MainCategory，用于托管新的小部件。

Fiddle.

【讨论】：