添加新节点后,删除节点后,kendoTreeView不会重新呈现

时间:2019-05-27 13:34:00

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

有两个事件处理程序:一个事件处理程序将一个节点添加到树中,另一个事件处理程序-删除它。并且它按预期工作正常,直到通过调用“ check”事件将节点删除为止。

这是一棵树(通过节点检查-将其删除):

var folderAttributeTree = $('#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);
                        }
                    }).data("kendoTreeView");

这是添加节点方法(它会创建始终嵌套的元素):

addLabel: function(e) {
                    var btn = e.event.target,
                        input = $(btn).prev(),
                        attributeTree = this.attributeTree;

                    if (input.val() !== null && input.val() !== '') {
                        if (attributeTree.length === 0) {
                            this.set('attributeTree', kendo.observableHierarchy([{
                                    'name': this.folder_label,
                                    'type': 'folder',
                                    'expanded': true,
                                    'items': [],
                                    'id': 0,
                                    'hasChildren': true
                                }])
                            );

                        } else {
                            var i = 0;
                            while (typeof attributeTree !== "undefined" && attributeTree !== null && attributeTree.length > 0) {
                                attributeTree = attributeTree[0]['items'];
                                i++;
                            }
                            attributeTree.push({
                                'name': this.folder_label,
                                'type': 'folder',
                                'expanded': true,
                                'items': [],
                                'id': i,
                                'hasChildren': true
                            });
                        }
                    }

                    input.val(''); // reset field

                    $("#folderAttributeTree").data("kendoTreeView").setDataSource(this.attributeTree);

                }

问题是,当我尝试在删除节点后添加节点时-树状视图不再重新渲染(但是如果我检查console.log,数据将按原样添加到对象中)。

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

提前谢谢!

1 个答案:

答案 0 :(得分:0)

在将问题提交给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,这显然对我的情况很有帮助。