Question

我使用以下数据源初始化了一个kendo树：

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”}），但它没有做任何事情。我已经成功删除了节点，但似乎无法添加任何节点。在使用自定义模式时，文档不清楚如何添加任何内容。

Answer 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>

Answer 2

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

您也可以使用dataSource。insert（{text：“foo”}）或 dataSource.add 。

Answer 3

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

    <!-- 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替换）。树中有一个节点有一个图标（k-i-pencil）。然后我调用一个函数addLoadMore，用ki-pencil拦截节点上的点击，并向此节点添加新内容 - 使用insertBefore在内容k-i-pencil之前插入新内容，然后删除旧节点）。我认为这个例子非常类似于你用按钮做的事情。因此，请查看loadMore函数，了解我如何检测与我点击的位置相对应的node（我提取uid并找到带有此uid的节点使用tree.findByUid）。最后，我删除原始节点（调用tree.remove）并再次使用k-i-pencil为新节点设置拦截器。希望这非常接近你所拥有的。

Kendo UI：使用自定义架构时无法将节点添加到树视图

3 个答案: