Пользовательский интерфейс 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"}), но он ничего не делает. Я успешно удалил узлы, но не могу добавить ни одного. В документации не ясно, как добавить что-либо при использовании пользовательских схем.

Источник

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). В дереве есть один узел, на котором есть значок (карандаш). Тогда я вызываю функцию addLoadMore перехватывает клики на узле с помощью ki-карандаша и добавляет новый контент в этот узел, используя insertBefore для вставки нового контента перед контентом с k-i-pencil а затем удаляет старый узел). Я думаю, что этот пример очень похож на то, что вы делаете со своей кнопкой. Итак, взгляните на loadMore функция, чтобы увидеть, как я обнаруживаю node в соответствии с тем, где я нажал (я извлекаю uid и найти узел с этим uid используя tree.findByUid). Наконец я удаляю исходный узел (вызывая tree.remove) и снова установите перехватчик для новых узлов с k-i-pencil, Надеюсь, это очень близко к тому, что у вас есть.

Источник

Не уверен, что вы хотите быть текстом узла, который вы хотите отобразить. Так что я угадаю, что вы хотите отобразить единственный элемент в схеме 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>
Источник

Treeview.append должен работать и добавлять новый узел на корневой уровень, если вы не указали примечание для добавления его.

Вы также можете использовать источник данных. вставить({text:"foo"}) или dataSource.add.

Источник
Другие вопросы по тегам