4

JSONファイルからのリモートデータソースで剣道UIツリーを使用しています。ツリーページにボタンがあり、ツリーの現在のデータを取得し、POSTを介してサーバーに送信します。サーバーは、現在のデータをJSONファイルに保存して、次にページをリロードしたときに、行った変更を保存します。それが私がしたいことです。

したがって、ツリーの現在のデータが次の場所にあることがわかります。

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

つまり、たとえば誰かがツリーのノードをドラッグアンドドロップしたときに、データがリアルタイムで変更されます。

私の問題は、ツリー内のノードをドラッグアンドドロップしたときにこのデータが変更されていないように見えるときに始まり、ツリーのルートレベルでノードをドラッグアンドドロップしたときにのみ変更され、それでも正しく実行されません。ノードもそこに移動する必要がありますが、代わりにノードがコピーされ、過去のノードもツリーに残されます...

たとえば、私はこのツリーを持っています：

開始ツリー

このようにドラッグアンドドロップで変更すると、次のようになります。

変更1

そして、私はデータを送信し、それを保存してリロードしますが、変更はまったく行われません！

PS：変更後の現在のデータを送信前に表示しても、ドラッグアンドドロップで視覚的に変更してもデータにまったく変更がないことがわかりますので、関係ありません。送信、保存、サーバー。

一方、次のように変更すると、次のようになります。

ここに画像の説明を入力してください

現在のデータでは、移動したノードが実際にデータの最後に追加されていることがわかりますが、データ内の最初の位置からは削除されていません！したがって、現在のデータをサーバーに送信する場合は、保存してから更新してください結果を得る：

ここに画像の説明を入力してください

データを表示および送信するためのコードは次のとおりです。

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

これはバグですか、それとも私は何か間違ったことをしていますか？ドラッグアンドドロップのたびに現在のデータが正しく変化するのを誰かが見ることができましたか？

4

2 に答える 2

6

まず最も重要なことは、KendoUI の最新バージョン (Kendo UI Beta v2012.3.1024) をまだベータ版で使用する必要があることですが、多くの問題が解決されています。

次に、kendoTreeView を作成するときに、次のように指定する必要があります。

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

ここで重要なのは、データ配列を直接使用するのではなくkendo.observableHierarchy、 でラップすることです。

その後、ドラッグ アンド ドロップの結果でデータが更新されます。

于 2012-11-11T10:53:17.763 に答える
0

私にとっては、オナバイの回答に加えて、save メソッドで同期機能を使用する必要がありました。タイプスクリプトを使用しています。

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

                }); 
        });



    }
于 2016-04-05T17:17:04.403 に答える