2

我有一个使用以下数据源初始化的剑道树：

var dataSource = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                url: '/Quota/Home/GetTemplateHierarchy',
                dataType: 'json',
                data: { hierarchyID: hierarchyID, quotaSetID: quotaSetID, batchSize: 10 }
            }
            },
            schema: {
                model: {
                    id: 'id',
                    hasChildren: 'hasChildren',
                    children: 'items',
                    fields: {
                        text: 'text'
                    }
                }
            }
        });

有谁知道如何为此数据源添加和创建新节点？我试过通用的 treeview.append({ text: "Boo"}) 但它什么也没做。我已成功删除节点，但似乎无法添加任何节点。该文档不清楚如何在使用自定义模式时添加任何内容。

4

3 回答 3

1

不确定要显示的节点文本是什么。所以我猜你想显示模式中唯一的元素nodelevel

这种情况下的数据应该是： { nodelevel : 99 }

按照一个完整的示例，我有一个初始节点，然后我将子节点附加到所选节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Tree View</title>
    <!-- Kendo UI Web styles-->
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
    <link href="styles/kendo.default.css" rel="stylesheet" type="text/css"/>

    <!-- Kendo UI Web scripts-->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>

    <script>
        $(document).ready(function () {
            var count = 0;
            var data = [
                { nodelevel: count++ }
            ];

            var dataSource = new kendo.data.HierarchicalDataSource({
                data  :data,
                schema:{
                    model:{
                        id         :'id',
                        hasChildren:'hasChildren',
                        children   :'items',
                        fields     :{
                            nodelevel:{
                                type    :'number',
                                editable:true,
                                nullable:false
                            }
                        }
                    }
                }
            });
            var tree = $("#tree").kendoTreeView({
                dataSource   :dataSource,
                dataTextField:"nodelevel"
            }).data("kendoTreeView");

            $("#add").click(function () {
                var selected = tree.select();
                if (selected.length > 0) {
                    tree.append({ nodelevel: count++ }, selected);
                }
            });
        });
    </script>

</head>
<body>
<a href="#" id="add">Add to selected</a>

<div id="tree"></div>
</body>
</html>
于 2012-11-21T22:39:38.377 回答
0

如果您没有指定要附加的注释，则treeview.append应该可以工作并将新节点附加到根级别。

您也可以使用数据源。插入({text:"foo"}) 或dataSource.add。

于 2012-11-22T19:49:23.270 回答
0

保罗，我想提出另一个解决方案...

    <!-- Kendo UI Web styles-->
    <link href="../styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
    <link href="../styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>

    <!-- Kendo UI Web scripts-->
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/kendo.web.min.js" type="text/javascript"></script>

    <!-- Local Styles -->
    <style type="text/css">
    </style>

    <!-- Initialize Form Elements -->
    <script type="text/javascript">
        $(document).ready(function () {
            function loadMore() {
                var uid = $(this).data("uid");
                var node = tree.findByUid(uid);
                tree.insertBefore(content, node);
                tree.remove(node);
                addLoadMore(".k-i-pencil");
            }

            function addLoadMore(clss) {
                $(clss, tree.element).closest(".k-item").on("click", loadMore);
            }

            var content = [
                {
                    text :"node1",
                    items:[
                        { text:"node1.1" },
                        { text:"node1.2" },
                        { text:"node1.3", spriteCssClass:"k-icon k-i-pencil" },
                        { text:"node1.4" }
                    ]
                }
            ];

            var tree = $("#tree").kendoTreeView({
                dataSource:content
            }).data("kendoTreeView");
            addLoadMore(".k-i-pencil");
        });
    </script>

</head>
<body>
<div id="tree"></div>
</body>
</html>

在这里，我创建了一个从 JSON 加载的内容的树（它应该被替换为你的ajaxAntiForgery）。树中有一个带有图标（ki-pencil）的节点。然后我调用一个函数addLoadMore，用 ki-pencil 拦截节点上的点击并将新内容添加到该节点 -insertBefore用于在内容之前插入新内容k-i-pencil，然后删除旧节点）。我认为这个示例与您使用按钮所做的非常相似。所以，看一下loadMore函数，看看我是如何检测到node与我点击的位置相对应的（我提取并使用uid它找到节点）。最后，我删除了原始节点（调用）并再次为新节点设置拦截器uidtree.findByUidtree.removek-i-pencil. 希望这与您所拥有的非常接近。

于 2012-11-22T23:04:37.203 回答