0

私は jQuery ウィジェット jqTree をナビゲーションとして、また動的に作成されたネストされた要素のアセンブリとして利用しています。これは完全な機能を備えており、私が見た jQuery の世界では優れたコンポーネントの 1 つです。

https://github.com/mbraak/jqTree

setStateしかし、動的に作成されたノードを保存するために、特にページが更新されたときにそれを活用することはできません。このようなフォーラムのような準標準的な質問に Github の「問題」を使用するのは嫌いなので、皆さんにお願いします。

フォームを使用して、Web アプリに関する特定のデータを保存するだけでなく、そのフォームからの結果の一部を利用して、jqTree のインスタンスに新しいツリー ノードや子を設定します。これは、jqTree のネイティブ関数addNodeAfterとappendNode. 問題は、フォームが送信され、それに応じてページがリセットされるときの状態を取得および設定することです。

開いている/閉じているネストされたノードの最後の状態を保存するためのパラメーターがありますが、これはsaveState: true,うまく機能しますが、フォームのライフサイクル中にフォームによって動的に生成されたノード/子は、フォームが送信されてページが更新されると破棄されます。誰かが開発者にこれらの行に沿って何かを尋ねます:

https://github.com/mbraak/jqTree/issues/301

しかし、私が答えに最も近いのは、次の引用です。

You can use the functions getState and setState to save the state of the tree.

var state = $('#tree1').tree('getState');

$('#tree1').tree('setState', state);

実行getStateするaddNodeAfterと、次のような console.log() 結果が得られます。

{"open_nodes":[1],"selected_node":[4]}

の同じ選択/作成ノード シナリオでsetState、コンソールに表示されます。

{"type":"tree","timeStamp":1440016021305,"jQuery111307363375960849226":true,"isTrigger":3,"namespace":"refresh","namespace_re":{},"target":{"jQuery111307363375960849226":16}}

つまり、私が見る限り、それらの命名法には直接的な関係がなく、ほぼ完全に異なる応答です。

そして、フォームを送信し、同時に新しいノード データを保存しようとすると、次のようになります。

               ('form').on('submit', function(e){
                    var state = $tree.tree('getState');
                    var savedstate = $tree.tree('setState', state);

                    console.log(state);
                    console.log(savedstate);
                    //e.preventDefault();
                });

データを保存したり、コンソールの例を取得したりしません。コメントアウトされたステートメントに注意してe.preventDefault();ください -- コメントを戻すと、コンソールでこれら 2 つの非常に異なる結果が得られますが、もちろん、フォームはトリガーされず、データが保存されていないことがわかります。

SO -- 2 つの質問があると思います。

getState1.) jqTreeとjqTreeでのこれら 2 つの非常に異なる結果の関係は何setStateですか? と：

2.) フォームを送信し、新しく作成されたツリー ノードを保存し、ページのリロード時にツリーを再設定するにはどうすればよいですか?

ここで長文になってしまい申し訳ありません。ご関心をお寄せいただき、ありがとうございます。

4

1 に答える 1

0

jqTree の開発者である Marco Braak 氏 (彼が Space Ghost: Coast to Coast のファンであることを願っています) によると、その答えは、 jqTree のメソッドを使用することではなく、活用getStateすることです。フォームが送信されると、次の方法ですべてがローカル ストレージに移動します。setStatetoJsonlocalStoragetoJson

               $('form').on('submit', function(e){
                    var tree_json = $('#tree1').tree('toJson');
                    localStorage.setItem('treeData', tree_json);
                });

文字列化する必要もありません。ページが読み込まれるとtreeData、ローカル ストレージ内の のインスタンスをチェックし、そこからツリーを構築します。そうでない場合は、別の AJAX 呼び出しから新たに描画します。

                    if (localStorage.getItem("treeData") === null) {
                            $('#tree1').tree({
                            data: data,
                            autoOpen: true,
                            dragAndDrop: true,
                            saveState: true,
                            onCreateLi: function(node, $li) {
                                $li.attr('id', node.id);
                            }
                        });
                    } else {
                            var savedTree = JSON.parse(localStorage.getItem('treeData'));
                            $('#tree1').tree({
                                data: savedTree,
                                autoOpen: true,
                                dragAndDrop: true,
                                saveState: true,
                                onCreateLi: function(node, $li) {
                                    $li.attr('id', node.id);
                            }
                        });
                    }

それsaveState: trueに応じて、開いているノードと閉じているノードの状態を維持します。魔法のように機能します-マルコに感謝します！

于 2015-08-21T14:45:18.820 に答える