javascript - 如何在页面加载时保留或选择最后一个事件 Node 状态

Question

我有一个jstree，我想通过将最后一个状态保存在中来使最后一个事件 Node 像以前一样完好无损>本地存储

下图显示了我想要得到的页面加载结果:

这是我如何将最后的状态保存到localStorage

var lastClickedData = data.inst.get_json();
 localStorage.setItem('lastnode',JSON.stringify(lastClickedData));

这里是 jsfiddle: http://jsfiddle.net/2Jg3B/2128/

$(function () {
    $('#jstree').jstree({
        "json_data" : {
            "data" : [
                {
                    "data" : "A node",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2" ]
                },
                {
                    "attr" : { "id" : "li.node.id1" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                }
            ]
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });
    
 var highlightAndExpandLastActiveNode = JSON.parse(localStorage.getItem('lastnode'));
       // $('#jstree')  //set last acive node
       console.log(highlightAndExpandLastActiveNode);
    });


 $("#jstree").bind("select_node.jstree", function(evt, data) {

          if (data.inst._get_parent().length <= 0 || data.inst._get_parent() === -1){
            console.log('clicked data', data.inst.get_json());
          } else {
            var lastClickedData = data.inst.get_json();
            localStorage.setItem('lastnode',JSON.stringify(lastClickedData));
          }
    });
    
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>

请帮助我提前致谢!!!!

Answer 1

这是使用较新版本的 jstree (v3.2.1) 的解决方案。当您在树中选择一个 Node 然后重新加载页面时，会根据 localStorage 中保存的 Node id 再次选择该 Node 。

http://jsfiddle.net/t4s7dz52/

JavaScript:

$(function() {
  $('#jstree').jstree({
    'core': {
      'data': [{
          "text": "A node",
          "children": ["Child 1", "A Child 2"]
        },
        "Long format demo"
      ]
    }
  });

  $('#jstree').bind('loaded.jstree', function() {
    var selectedNodeId = localStorage.getItem('selectedNodeId');
    $('#jstree').jstree(true).select_node(selectedNodeId);
  });
});


$("#jstree").bind("select_node.jstree", function(e, data) {
  localStorage.setItem('selectedNodeId', data.node.id);
});

html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="jstree">
</div>