銷毀多選小部件

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

使用刪除將起作用一次