kendoTreeView 在添加新节点后删除节点后没有重新渲染答案

【问题标题】：The kendoTreeView is not getting re-rendered after node removal upon adding new nodekendoTreeView 在添加新节点后删除节点后没有重新渲染
【发布时间】：2019-05-27 13:33:59
【问题描述】：

有两个事件处理程序：一个将节点添加到树中，另一个 - 删除它。它可以正常工作，直到通过调用“检查”事件删除节点。

这是一棵树（在节点检查后 - 它被删除）：

$('#folderAttributeTree').kendoTreeView({
    dataSource: this.attributeTree,
    dataRole: "treeview",
    dataTextField: "name",
    checkboxes: true,
    loadOnDemand: true,
    check: function(e) {
        var treeView = e.sender,
            checkedNode = e.node;
        treeView.remove(checkedNode);
    },
    dataBound: function(e) {
        if (!this.dataSource.data().length) {
            this.element.append("<li class='no-items'>No items yet.</li>");
        } else {
            this.element.find(".no-items").remove();
        }
    }
}).data("kendoTreeView");

这里是添加节点方法（它总是创建嵌套元素）：

addLabel: function(e) {
    e.preventDefault();

    var label = this.get('folder_label'),
        folderAttributeTree = $("#folderAttributeTree").data("kendoTreeView"),
        attributeTree = this.get('attributeTree')
        data = [];

    if (label !== null && label !== '') {

        if (attributeTree.length) {

            data = attributeTree;

            var i = 0;

            while (data.length) {
                data = data[0].items;
                i++;
            }

            data.push({
                name: label,
                type: 'folder',
                expanded: true,
                id: i,
                items: [],
                hasChildren: true,
                itemIndex: 0
            });

        } else {

            this.set('attributeTree', [{
                name: label,
                type: 'folder',
                expanded: true,
                id: 0,
                items: [],
                hasChildren: true,
                itemIndex: 0
            }]);

        }
    }

    this.set('folder_label', '');

    folderAttributeTree.setDataSource(this.attributeTree);

}

问题是，当我在删除节点后尝试添加节点时 - 树视图不再重新渲染（但是，如果我检查 console.log，数据将按应有的方式添加到对象中）。

我是 kendo-ui 的新手。请帮我解决这个问题。

提前谢谢你！

【问题讨论】：

这是一种将节点插入树的奇怪方法，从未见过。例如，您为什么不尝试使用append() 或insertAfter()？
是的，我正在尝试，但现在我找不到如何获得最深节点的方法.. 有什么建议吗？
您的数据是本地的还是远程的？
@DontVoteMeDown 数据是本地的

标签： javascript jquery kendo-ui treeview kendo-treeview

【解决方案1】：

在将我的问题提交给 Teleriks 支持后，他们回答了一个非常有用的提示，这使我找到了解决方案。对于那些有类似问题的人，这里是解决方案：

addLabel: function(e) {
                    e.preventDefault();

                    var label = this.get('folder_label'),
                        folderAttributeTree = $("#folderAttributeTree").data("kendoTreeView"),
                        attributeTree = this.get('attributeTree');

                    if (label !== null && label !== '') {

                        if (attributeTree.length) {

                            var deepest = this.findDeepest(this.attributeTree[0]);

                            folderAttributeTree.append({
                                name: label,
                                type: 'folder',
                                expanded: true,
                                id: deepest.id + 1,
                                items: [],
                                hasChildren: true
                            }, $("#folderAttributeTree .k-item:last"));

                        } else {

                            this.set('attributeTree', kendo.observableHierarchy([{
                                name: label,
                                type: 'folder',
                                expanded: true,
                                id: 0,
                                items: [],
                                hasChildren: true
                            }]));

                        }
                    }

                    this.set('folder_label', '');

                    folderAttributeTree.setDataSource(viewModel.attributeTree);

                }

有用的提示是使用.append 方法而不是.push 我没有注意到 append 方法有第二个（可选）参数，称为 parentNode，这对我来说显然很有帮助。

【讨论】：