从 KendoUI TreeView 获取当前数据答案

【问题标题】：Getting Current Data from KendoUI TreeView从 KendoUI TreeView 获取当前数据
【发布时间】：2012-10-29 21:07:57
【问题描述】：

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

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

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

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

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

例如我有这棵树：

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

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

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

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

【问题讨论】：

标签： json treeview datasource kendo-ui

【解决方案1】：

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

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

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

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

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

【讨论】：

确实效果很好！非常感谢！！顺便说一句，你知道有什么方法可以处理文件夹旁边的展开箭头吗？因为我猜是由于 beta 中的一些错误，展开箭头也显示在没有子节点的节点上..（此外，箭头似乎不会在初始化时扩展到文件夹已扩展，但我猜应该在测试版中存在故障）
如果你想删除那些没有孩子的节点上的额外箭头，只是没有在上面定义items。如果有items，即使它是空的，你也会得到箭头。不确定它是 feature 还是 bug
理论上，扩展所有节点应该是tree.expand(".k-item");，但由于某种原因（错误？）它并不（总是）工作。我找到了两种解决方法： 1. 在您的 json 中定义一个“扩展”字段并将其设置为“真”。 2.执行tree.expand('.k-item')两次！！。
再次感谢！关于未展开的箭头，似乎数据数组也保存了展开状态，所以没有问题，太棒了！关于额外的箭头，如果不存在 items 字段，则数据数组似乎会自动添加空的 items 字段，所以我似乎无能为力..除了搜索 json 之外，任何解决方法的想法文件并每次都删除items:[] 字段？？还有其他已知的控制箭头的方法吗？
这对我来说也是如此，如果 JSON 没有 items 字段，那么我也没有得到箭头！问题是当我拖放一个节点时，如果节点根本没有item字段，然后剑道在将节点写入新位置时会自动在节点上添加"items":[]！

【解决方案2】：

对我来说，除了 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) => {

                }); 
        });



    }

【讨论】：