Question

我正在使用带有来自JSON文件的远程数据源的kendo UI树。我在树页面上有一个按钮，它获取树的当前数据，通过POST将其发送到服务器，服务器将当前数据保存到JSON文件，以便下次重新加载页面时，我所做的更改将被保留。这就是我想要发生的事情。

所以我知道树的当前数据是：

$("#treeview").data("kendoTreeView").dataSource.data()

这意味着数据会在那里实时更改，例如当有人拖放树的节点时。

当我在树中拖放节点时，这个数据似乎没有改变，我的问题就开始了，只有当我将一个节点拖放到树的根级别时才会改变，即使这样也不会改变它正确地应该在那里移动节点，而是复制节点，将过去的节点留在树中......

例如我有这棵树：

Starting Tree

如果我按照这样进行拖放更改：

Change 1

我发送数据，保存并重新加载更改根本没有！

PS：即使我在发送之前查看更改后的当前数据，我发现数据根本没有变化，即使我通过拖放进行了视觉上的改变。所以它没有与发送，保存和服务器有关。

另一方面，如果我做这样的改变：

enter image description here

我可以在当前数据中看到移动的节点确实被添加到数据的末尾但是它没有从数据中的初始位置删除！所以如果我将当前数据发送到服务器，保存它和然后刷新我得到的结果：

enter image description here

查看和发送数据的代码是：

function sendData() {
            var req = createRequest();
            var putUrl = "rest/hello/treeData";
            req.open("post", putUrl, true);
            req.setRequestHeader("Content-type","application/json");
            var dsdata = $("#treeview").data("kendoTreeView").dataSource.data();
            alert(JSON.stringify(dsdata));
            req.send(JSON.stringify(dsdata));

            req.onreadystatechange = function() {
                if (req.readyState != 4) {
                    return;
                }
                if (req.status != 200) {
                    alert("Error: " + req.status);
                    return;
                }
                alert("Sent Data Status: " + req.responseText);
            }
        }

这是一个Bug还是我做错了什么？有没有人能够在每次拖放时看到当前数据的正确变化？

Answer 1

首先也是最重要的是你必须使用最新版本的KendoUI（Kendo UI Beta v2012.3.1024）仍然处于测试阶段，但他们已经解决了很多问题。

然后，当你创建kendoTreeView时，你必须说：

    tree = $("#treeview").kendoTreeView({
        dataSource :kendo.observableHierarchy(data),
        dragAndDrop:true
    }).data("kendoTreeView");

重要的是不直接使用数据数组，但用kendo.observableHierarchy包装它。

然后，您将使用drag＆amp; amp;的结果更新数据。下降。

Answer 2

对我来说，除了OnaBai之外，我必须在save方法中使用sync函数。我正在使用Type Script。

 this.treeData = new kendo.data.HierarchicalDataSource({
                data: kendo.observableHierarchy([]),//Thanks OnaBai

                schema: {
                    model: {
                        id: "MenuItemId",
                        children: "MenuItemChildren",
                        hasChildren: (e) => {
                            //this removes arrow next to items that do not have children. 
                            return e.MenuItemChildren && e.MenuItemChildren.length > 0;
                        }
                    }
                }
            });

public save() {
        this.treeData.sync().done(() => {
            console.log("sync data"); 
            var myType = this.treeData.view();

            this.$http.post("/api/TreeViewPicker", myType)
                .then((response) => {

                }); 
        });



    }

从KendoUI TreeView获取当前数据

2 个答案: