2

我想从Telerik 的 Kendo UI中销毁并重新创建多选小部件。通常这是我以前做过很多次的简单事情，但从来没有多选。我现在面临的问题是应该工作的方式（至少我认为应该）......没有。

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

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

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

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

我准备了显示行为的小型Dojo 示例。当下拉列表被销毁并重新创建时，它看起来是正确的。当我对多选执行相同操作时，它总是将小部件添加为下一行。

当然，我可以通过更改 dataSource 并调用 read 方法或类似的方法来解决这个问题，但我想知道它是错误还是有另一种方法来破坏多选。

谢谢。

4

3 回答 3

8

此代码使用 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');
  }

});

于 2016-10-19T13:02:59.540 回答
1

当您清除 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"]
      }
});
于 2016-10-19T12:54:28.020 回答
0

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

$('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');
  }
});

使用 remove 将工作一次

于 2016-10-19T12:30:37.263 回答