jqTree getState 和 setState -- Saving/Restoring 动态创建的树节点

Question

我正在使用 jQuery 小部件 jqTree 作为导航和动态创建的嵌套元素的集合。它功能齐全，是我所见过的 jQuery-verse 中同类产品中最好的组件之一：

但我无法利用其 setState 来保存动态创建的节点，尤其是在页面刷新时。我讨厌使用 Github "issues" 来解决类似论坛的准规范问题，所以我求助于大家。

我正在使用表单来保存有关我的网络应用程序的特定数据，而且还利用该表单的部分结果来填充具有新树节点 and/or 个子节点的 jqTree 实例。这是一个非常简单的过程，利用了 jqTree 的本地函数 addNodeAfter 和 appendNode。问题在于为表单提交和页面相应重置时获取和设置这些状态。

有一个用于保存 open/closed 嵌套节点的最后状态的参数，saveState: true, 效果很好，但是任何 nodes/children 由表单在其生命周期中动态生成的都会被销毁表单提交，页面刷新。有人确实在这里向开发人员询问了一些类似的问题：

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 相同的 selected/created 节点场景，我进入控制台：

{"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(); 语句——重新注释，我确实在控制台中得到了这两个截然不同的结果，但是，当然，我的表单不会触发，据我所知没有数据已保存。

SO -- 我想我有两个问题：

1.) jqTree 中getState 和setState 这两个截然不同的结果之间的关系是什么？并且：

2.) 如何提交表单，保存新创建的树节点并在页面重新加载时让它们重新填充树？

很抱歉在这里说得太长了 -- 感谢您的关注和您可能提供的任何帮助。

Answer 1

根据 jqTree 的开发者 Marco Braak（你一定希望他是 Space 幽灵：从海岸到海岸的粉丝），答案不是使用 getState 或 setState，而是利用 jqTree 的 toJson 方法和本地存储（或 localStorage，如果您坚持的话）。提交表单后，所有内容都会通过 toJson:

进入本地存储

               $('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相应地维护打开和关闭节点的状态。很有魅力——谢谢 Marco！

jqTree getState 和 setState -- Saving/Restoring 动态创建的树节点

jqTree getState and setState -- Saving/Restoring Dynamically Created Tree Nodes

jquery

form-submit

jqtree