0

在我的项目中，我需要动态创建和删除拆分器。我们正在使用 KendoUI。

以编程方式创建拆分器很好。它正在移除我担心的分离器。我查看了拆分器控件的 API，它有一个destroy方法，但不会从 DOM 中删除小部件。

我认为留给我的唯一选择是从 DOM 中手动删除它。所以我所做的是我检查了元素拆分器功能创建/修改，然后将它们恢复到原始状态。

这是我到目前为止写的代码：

HTML

<p>
<button id="createSplitter" type="button" class="k-button">Create Splitter</button>

<button id="destroySplitter" type="button" class="k-button">Destroy Splitter</button>
</p>

<div id="splitter">
    <div id="left">Left column</div>
    <div>Main content</div>
</div>

JavaScript

var leftPane = $("#left");
var splitterElement;
$("#createSplitter").click(function(e) {
splitterElement = $("#splitter").kendoSplitter({
    panes: [
        { collapsible: true, size: 200 },
        { }
    ]
});
});

$("#destroySplitter").click(function(e){
    var splitter = splitterElement.data("kendoSplitter");
    splitter.destroy();
    $('#splitter').removeClass('k-widget k-splitter').removeAttr('data-role');
    $('#splitter .k-splitbar').remove();
    $('#splitter .k-pane')
    .removeClass("k-pane k-scrollable")
    .removeAttr("style");
});

我还为此功能创建了一个小提琴 - https://jsfiddle.net/7gyfr1v6/3/。

所以上面的代码有效。在小提琴中，当我单击时Create Splitter，它会创建它们，当我单击时Destroy Splitter，它会删除拆分器功能。然而，为了实现这一点而操纵 CSS 听起来有点 hacky。

有没有更好的方法来实现这一点？如果没有，您在我编写的代码中是否看到任何问题，可以改进此代码吗？

4

0 回答 0