Получение текущих данных из KendoUI TreeView

используя дерево пользовательского интерфейса кендо с удаленным источником данных из файла JSON. У меня есть кнопка на странице дерева, которая получает текущие данные дерева, отправляет их через POST на сервер, и сервер сохраняет текущие данные в файл JSON, чтобы при следующей перезагрузке страницы внесенные изменения будет сохранено.Это то, чего я хочу.

Итак, я знаю, что текущие данные дерева находятся в:

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

Это означает, что данные изменяются в реальном времени, например, когда кто-то перетаскивает узел дерева.

Моя проблема начинается, когда эти данные некажется, что он меняется, когда я перетаскиваю узлы внутри дерева, и изменяется только тогда, когда я перетаскиваю узел на корневом уровне дерева, и даже тогда он несделать это правильно, так как узел также должен быть перемещен туда, но вместо этого узел копируется, оставляя также прошлый узел в дереве ...

Например, у меня есть это дерево:

Если я сделаю перетаскивание, как это:

И я отправляю данные, сохраняю их и перезагружаю изменениясделано вообще!

PS: Даже когда я просматриваю текущие данные после изменения перед его отправкой, я вижу, что никаких изменений в данных нет вообще, даже если я сделал визуальное изменение с помощью перетаскивания.Это связано с отправкой, сохранением и сервером.

С другой стороны, если я сделаю изменение, как это:

В текущих данных я вижу, что перемещенный узел действительно добавляется в конец данных, но не удаляется из него. 's исходная позиция в данных! Поэтому, если я отправлю текущие данные на сервер, сохраню их, а затем обновлю, я получу результат:

Код для просмотра и отправки данных:

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

Это ошибка или я делаю что-то не так? Кто-нибудь смог увидеть, как текущие данные корректно меняются при каждом перетаскивании?

Ответы на вопрос(2)

Решение Вопроса

Прежде всего, вы должны использовать последнюю версию KendoUI (Kendo UI Beta v2012.3.1024), которая все еще находится в бета-версии, но именно здесь они решили много проблем.

Затем, когда вы создаете kendoTreeView, вы должны сказать что-то вроде:

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

Здесь важноне используя непосредственно массив данных, но оборачивая егоkendo.observableHierarchy

Затем вы обновите данные в результате перетаскивания капли.

 CipherDarkness12 нояб. 2012 г., 10:40
Спасибо еще раз! Что касается нерасширенных стрелок, то кажется, что массив данных также сохраняет расширенное состояние, поэтому никаких проблем нет, просто потрясающе! Насчет лишних стрелок, кажется, что пустойitems поле добавляется автоматически массивом данных, если нетitems поле существует, так что, кажется, я могуничего не делайте там .. Любая идея для обходного пути, кроме поиска файла JSON и удаленияitems:[] Поля каждый раз? Любой другой известный способ управления стрелками?
 hidden05 апр. 2016 г., 18:44
чтобы удалить развернутые стрелки, используйте схему: {model: {id: "MenuItemId», дети: "MenuItemChildren», hasChildren: (e) => {// убирает стрелку рядом с элементами, которые не имеют дочерних элементов. вернуть e.MenuItemChildren && e.MenuItemChildren.length> 0; }}}
 OnaBai12 нояб. 2012 г., 10:23
Если вы хотите удалить лишнюю стрелку на тех узлах, которые не имеют дочерних элементов, это просто не определениеitems в теме. Если там естьitems даже если он пуст, вы получите стрелки. Не уверен, что этоособенность илиошибка
 OnaBai12 нояб. 2012 г., 10:31
Теоретически, расширение всех узлов должно бытьtree.expand(".k-item"); но по какой-то причине (ошибка?) это нет (всегда) работает. Я'мы нашли два обходных пути: 1. определить в вашем JSON и 'расширить» поле и установите его в 'правда', 2. выполнитьtree.expand('.k-item') дважды!!.
 CipherDarkness12 нояб. 2012 г., 11:20
Это верно и для меня, если JSON неиметьitems поле тогда я неСтрелка тоже может быть! Проблема в том, что когда я перетаскиваю узел, если узелне иметьitem поле вообще, затем кендо добавляется автоматически"items":[] на узле, когда он записывает узел на новую позицию!
 CipherDarkness12 нояб. 2012 г., 09:50
Действительно, это сработало отлично! Спасибо большое !! Кстати, знаете ли вы какой-либо способ обработки стрелок раскрытия рядом с папками? Потому что, как я полагаю, из-за некоторой ошибки в бета-версии стрелки раскрытия отображаются и на узлах без дочерних элементов ... (Кроме того, стрелки не отображаются развернутыми при начальной привязке к папкам, которые расширяются, но глюки должны существовать в бета-версии, я думаю)

Для меня в дополнение к ответу OnaBai мне пришлось использовать функцию синхронизации в методе сохранения. Я использую Type Script.

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

                }); 
        });



    }

Ваш ответ на вопрос