7

我们在 cardView kendo.ui.Window 项中使用了大约 3 个 DropDownList 组件。当窗口关闭时，我们为每个包含的 DropDownList 项目调用“销毁”方法。

问题是以下代码没有删除所有 DropDownList 的相关 DIVS，这些 DIVS 已附加到文档正文中：

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.destroy();

经过一番搜索，我们在 destroy 方法（来自 Telerik）的文档中注意到以下注释： 重要提示：此方法不会从 DOM 中删除 DropDownList 元素。

因此，每次有人打开和关闭我们的 kendo 窗口（卡片视图）时，都会附加许多 DropDownList 的 div 而不会从 DOM 中删除 - 这可能会导致 DOM 出现严重的性能问题。

留在 DOM 中的附加 DIVS 是 - 例如“k-list-container”和“k-animation-container”。

  1. 我怎么解决这个问题？
  2. 有没有办法完全销毁每个 DropDownList 的元素（包括从 DOM 中删除所有相关元素）？
  3. 当我们需要销毁其他 kendo.ui 组件时，这个问题是否相关？（如combobox、dateTimePicker、Tooltip等）由于我们的kendo.ui卡片窗口还包含其他基本的kendo.ui组件。
4

2 回答 2

7

destroy 方法将删除附加到文档正文并且仅通过查看 DOM 无法清楚地与小部件关联的元素。因此，例如，k-animation-container删除带有类的元素以进行下拉菜单。文档中的评论说就地元素不会被删除。

为了删除所有内容，您应该在小部件上调用destroy，然后自己删除剩余的元素。最简单的选择是在所有要销毁的小部件周围放置一个包装 div 元素并将其删除。如果要删除特定的小部件，通常还可以引用该wrapper属性，该属性包含代表该小部件最外层 DOM 元素的 jQuery 元素：

$(widget.wrapper).remove();

因此，在您的情况下，这将删除下拉列表的所有元素和事件：

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.destroy();
dropdownlist.wrapper.remove();

如果要删除为剑道窗口创建的所有内容，可以执行相同操作：

var window = $("#window").data("kendoWindow");
// recursively call destroy for all widgets it finds
kendo.destroy(window.wrapper); 
window.wrapper.remove();
于 2014-06-25T13:44:27.320 回答
0

无论出于何种原因，以前的解决方案都不适合我，这就是我最终实施的。

var grid = $('#GridName').data("kendoGrid");

//get grid data
var gridData = grid.dataSource.data();

//set the length (cannot use data.length in for loop as it changes when you remove the data items)
var dataLength = gridData.length;

//remove data from the grid
if (dataLength > 0) {
    for (var i = 0; i < dataLength; i++) {
        //must delete the first object in the array else it throws index out of bounds 
        //error because the data array changes when you remove an object
        grid.dataSource.remove(data[0]);
    }
}
于 2017-02-28T17:03:31.620 回答