4

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

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

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

这意味着数据在那里实时变化，例如当有人拖放树的一个节点时。

我的问题开始于当我在树内拖放节点时这些数据似乎没有改变，并且只有当我将节点拖放到树的根级别时才会改变，即使那样它也不能正确地做到这一点节点也应该移到那里，但是节点被复制，过去的节点也留在树中......

例如，我有这棵树：

起始树

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

变化 1

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

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

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

在此处输入图像描述

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

在此处输入图像描述

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

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);
            }
        }

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

4

2 回答 2

6

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

然后，当您创建 kendoTreeView 时，您必须这样说：

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

这里重要的是不要直接使用数据数组，而是用kendo.observableHierarchy.

然后，您将使用拖放结果更新数据。

于 2012-11-11T10:53:17.763 回答
0

对我来说，除了 OnaBai 答案之外，我还必须在保存方法上使用同步功能。我正在使用类型脚本。

 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) => {

                }); 
        });



    }
于 2016-04-05T17:17:04.403 回答