销毁多选小部件

Question

我想从Telerik的Kendo UI破坏并重新创建多选小部件。 通常，这是我之前做过很多次的容易的事情，但对于multiselect却从来没有。 我现在面临的问题是应该起作用的方式（至少我认为应该如此）……没有。

这是我用来销毁和重新创建诸如网格或下拉列表之类的组件的代码：

if ($('#dropdown1').data('kendoDropDownList')) {
    $('#dropdown1').data('kendoDropDownList').destroy();
    $('#dropdown1').html('');
}

我怎么说-如果我在下拉列表或网格上使用它-它可以工作。 但是在多重选择上，它不会：

if ($('#multiselect1').data('kendoMultiSelect')) {
    $('#multiselect1').data('kendoMultiSelect').destroy();
    $('#multiselect1').html('');
}

我准备了一个小Dojo示例 ，其中显示了该行为。 下拉菜单销毁并重新创建后，它看起来是正确的。 当我对Multiselect执行相同操作时，总是将小部件添加为下一行。

当然，我可以通过更改dataSource并仅调用read方法或类似方法来克服此问题，但是我想知道这是错误还是另一种方法来销毁多重选择。

谢谢。

Answer 1

此代码使用unwrap（）从kendo包装器div中删除原始输入，然后使用.remove（）摆脱剩余的kendo DOM元素：

$('html').on('click', '#destroy2', function(e){
  if ($('#multiselect1').data('kendoMultiSelect')) {
    alert('multiselect exists - destroying and recreating');

    $('#multiselect1').data('kendoMultiSelect').destroy();
    $('#multiselect1').unwrap('.k-multiselect').show().empty();
    $(".k-multiselect-wrap").remove();

    $("#multiselect1").kendoMultiSelect({
      dataSource: {
        data: ["Three3", "Four4"]
      }
    });

    $('#text2').text('Multiselect AFTER calling destroy');
  }

}）;

Answer 2

当您清除multiselect1的html时，它仍将输入转换为小部件时创建的所有其他dom元素置于后面。 然后，当您重新创建它时，它不能像下拉列表那样处理它，我认为这可能是一个错误。

如果改为将需要重新创建的控件包装在div元素中，然后清除该元素，它将消除所有多余的元素，因此您可以从头开始创建新的元素。

http://dojo.telerik.com/@Stephen/EDaYA

<div id='multiselectDiv'>
    <input id="multiselect1" />
</div>

$('html').on('click', '#destroy2', function(e){
  if ($('#multiselect1').data('kendoMultiSelect')) {
      alert('multiselect exists - destroying and recreating');

      $('#multiselect1').data('kendoMultiSelect').destroy();
      $('#multiselectDiv').empty();

      $('#multiselectDiv').append('<input id="multiselect1" />')
      $("#multiselect1").kendoMultiSelect({
      dataSource: {
         data: ["Three3", "Four4"]
      }
});

Answer 3

我将您的代码更新为此，并且它可以正常工作：

$('html').on('click', '#destroy2', function(e){
  if ($('#multiselect1').data('kendoMultiSelect')) {
    alert('multiselect exists - destroying and recreating');
    var multiSelect = $('#multiselect1').data("kendoMultiSelect");
        multiSelect.value([]);
    $("#multiselect1").remove();
    $("#multiselect1").kendoMultiSelect({
      dataSource: {
        data: ["Three3", "Four4"]
      }
});

    $('#text2').text('Multiselect AFTER calling destroy');
  }
}); 

使用删除将起作用一次