Question

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

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

所以 - 我猜我有两个问题：

1。）jqTree中getState和setState这两个非常不同的结果之间的关系是什么？和

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

抱歉在这里详细介绍 - 感谢您的关注以及您可能提供的任何帮助。

Answer 1

答案，根据jqTree的开发人员Marco Braak（你一定希望他是太空幽灵：海岸到海岸的粉丝），不是在使用getState或setState，而是利用jqTree的{{1}方法，为了我的目的，本地存储（或toJson，如果你坚持）。提交表单后，所有内容都会通过localStorage

转到本地存储

toJson

也不需要对其进行字符串化。当页面加载时，它会检查本地存储中的$('form').on('submit', function(e){ var tree_json = $('#tree1').tree('toJson'); localStorage.setItem('treeData', tree_json); });的任何实例并从中构建树 - 如果没有，它会从单独的AJAX调用中抽取新的数据：

treeData

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); } }); }相应地维护开放和关闭节点的状态。像魅力一样 - 感谢Marco！

jqTree getState和setState - 保存/恢复动态创建的树节点

1 个答案: