0

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

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

所以——我想我有两个问题：

getState1.）jqTree和jqTree中这两个非常不同的结果之间有什么关系setState？和：

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

很抱歉在这里详细说明-感谢您的关注和您可能提供的任何帮助。

4

1 回答 1

0

根据 jqTree 的开发人员 Marco Braak（你必须希望他是 Space Ghost：Coast to Coast 的粉丝），答案不是使用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相应地维护打开和关闭节点的状态。像魅力一样工作——谢谢马可！

于 2015-08-21T14:45:18.820 回答