jqTree getState和setState —保存/恢復動態創建的樹節點

Question

我將jQuery小部件jqTree既用作導航，也用於動態創建的嵌套元素的組裝。 它功能齊全，是我所見過的jQuery-verse中同類更好的組件之一：

https://github.com/mbraak/jqTree

但是我無法利用其setState保存動態創建的節點，尤其是在頁面刷新時。 我討厭將Github的“問題”用於類似論壇的准規范問題，所以我轉向大家。

我正在使用表單既保存有關Web應用程序的特定數據，又利用該表單的部分結果用新的樹節點和/或子節點填充jqTree的實例。 利用jqTree的本機函數addNodeAfter和appendNode ，這是一個非常簡單的過程。 問題在於獲取和設置表單提交和頁面相應重置時的狀態。

有一個參數可以保存打開/關閉的嵌套節點的最后狀態saveState: true,即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);

如果我在addNodeAfter上運行getState ，我得到一個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(); 聲明-注釋一下，然后回到控制台，我確實在控制台中得到了這兩個非常不同的結果，但是，當然，我的表單不會觸發，據我所知，沒有保存任何數據。

所以-我想我有兩個問題：

1.）這兩個與jqTree中的getState和setState截然不同的結果之間有什么關系？ 和：

2）如何在重新加載頁面時提交表單，保存新創建的樹節點並讓它們重新填充樹？

很抱歉在這里進行詳細介紹-感謝您的關注和可能提供的任何幫助。

Answer 1

每個jqTree的開發人員Marco Braak（您一定希望他是太空鬼魂：從海岸到海岸的粉絲）的toJson不是使用getState或setState而是利用jqTree的toJson方法，以及就我而言，使用本地存儲（或localStorage ，如果你堅持）。 提交表單后，所有內容都會通過toJson進入本地存儲：

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

也無需將其分類。 頁面加載時，它將檢查本地存儲中是否有任何treeData實例，並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維護打開和關閉節點的狀態。 像魅力一樣工作-謝謝Marco！