从KendoUI TreeView获取当前数据

Question

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

因此，我知道树的当前数据位于：

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

这意味着数据实时更改，例如当有人拖动树的节点时。我的问题是，当我在树内拖放节点时，数据似乎没有变化，只有当我将节点拖放到根级别时才会发生变化，即使这样也不正确，因为节点应该被移动到那里，但实际上节点被复制了，原来的节点仍然留在树中...例如，我有这棵树：如果我进行拖放更改，如下所示：如果我发送数据，保存并重新加载，则根本不会进行更改！即使在发送、保存和服务器方面都没有问题，但即使我通过拖放进行了视觉上的更改，查看更改之后的当前数据时，我也看不到任何数据的更改。另一方面，如果我进行以下更改：我可以看到当前数据中移动的节点确实被添加到数据的末尾，但它没有从其初始位置中删除！因此，如果我将当前数据发送到服务器，保存并刷新，我得到的结果是：查看和发送数据的代码如下：

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 吗？还是我做错了什么？有人能在每次拖放时正确看到当前数据的变化吗？

- CipherDarkness

Answer 1

首先且最重要的是，您必须使用最新版本的KendoUI（Kendo UI Beta v2012.3.1024），尽管仍处于beta版本，但在此版本中他们已解决了许多问题。

接下来，在创建kendoTreeView时，您需要输入类似以下内容的语句：

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

重要的是不直接使用数据数组，而是将其包装在kendo.observableHierarchy中。

然后您将获得通过拖放更新的数据结果。

- OnaBai

---

确实，它完美地运行了！非常感谢您！ 顺便问一下，您知道如何处理文件夹旁边的展开箭头吗？因为我猜测在测试版中存在某些错误，展开箭头也会显示在没有子节点的节点上...(而且箭头似乎不会在初始化时扩展到已展开的文件夹，但是我想在测试版中应该存在故障) - CipherDarkness

如果您想要删除那些没有子节点的节点上的额外箭头，只需不在其上定义“items”即可。如果有“items”，即使它是空的，您也会得到箭头。不确定这是一个“特性”还是一个“错误”。 - OnaBai

理论上，展开所有节点应该是 tree.expand(".k-item"); 但由于某种原因（bug？），它并不总是起作用。我找到了两个解决方法：1. 在您的json中定义一个“expanded”字段，并将其设置为“true”。2. 执行 tree.expand('.k-item') 两次！！ - OnaBai

再次感谢！关于未展开的箭头，似乎数据数组也保存了展开状态，所以没有问题，太棒了！关于额外的箭头，似乎如果没有“items”字段，则数据数组会自动添加空的“items”字段，所以我在那里无法做任何事情。除了每次搜索JSON文件并删除“items：[]”字段之外，还有其他解决方法吗？是否知道其他控制箭头的方法？ - CipherDarkness

这对我来说也是真的，如果JSON没有items字段，那么箭头也不会出现！问题在于，当我拖放一个节点时，如果节点根本没有item字段，那么kendo在将节点写入新位置时会自动添加"items":[]到该节点上！ - CipherDarkness

要去除展开箭头，请使用以下架构： schema: { model: { id: "MenuItemId", children: "MenuItemChildren", hasChildren: (e) => { //这将移除没有子项目的项目旁边的箭头。 return e.MenuItemChildren && e.MenuItemChildren.length > 0; } } } - hidden

Answer 2

除了OnaBai的答案之外，我还必须在保存方法上使用同步函数。我正在使用TypeScript。

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

                }); 
        });



    }

- hidden