在使用 State 插件的情况下如何管理选定的叶子

Question

如果我让用户打开一棵树，进行叶选择，然后关闭该页面，那么下次用户打开树时，他们将返回到与上次关闭页面时相同的节点和叶。

然而，就我而言，在关闭和重新打开树之间，我的用户在其他应用程序页面中执行其他操作，这可能意味着我希望重新打开树并选择不同的叶（但节点相同）。

如果我使用的是 'state' 插件，如何手动设置选定的叶子？

谢谢。

Answer 1

只要您使用 state 插件，您所做的每一个更改都会立即写入您的 localStorage。

要以编程方式更新它，您可以使用：

// get the object out of data in localStorage
var treeObj = JSON.parse(localStorage.getItem('jstree')); 

// update the selected items array
treeObj.state.core.selected = [ "yourNewId"]; 

// save it back
localStorage.setItem( 'jstree', JSON.stringify(treeObj) );

检查演示 - Fiddle Demo。在那里单击 update 按钮，然后再次单击运行 fiddle。您会看到所选节点现在更改为 Cat 0.3.

Answer 2

关于您将找到的最简单的 jsTree 示例。非常感谢@Nikolay Ermakov

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>


<div id="myTree">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
    $(function () {
        var data = [
             { "id": "root", "parent": "#", "text": "Root" },
             { "id": "cat1", "parent": "root", "text": "First Branch" },
             { "id": "cat01", "parent": "cat1", "text": "Cat 0.1" },
             { "id": "myIDstring", "parent": "cat1", "text": "Cat 0.2" },
             { "id": "cat03", "parent": "cat1", "text": "Cat 0.3" },
             { "id": "cat011", "parent": "cat01", "text": "Cat 0.1.1" },
             { "id": "cat012", "parent": "cat01", "text": "Cat 0.1.2" },
             { "id": "cat013", "parent": "cat01", "text": "Cat 0.1.3" }
        ]



        $('#myTree').jstree({ core: { data: data } })
       .on('ready.jstree', function () {
            $('#myTree').jstree("open_all");
            var t = $('#myTree').jstree(true);
            var n = t.get_node("myIDstring");
            console.log(n.id, n);
            n = t.get_node("cat012");
            console.log(n.id, n);
            t.select_node(n);
            n = t.get_selected(true);
            console.log(n[0].id, n[0]);
        });
    });
</script>
</body>
</html>

在使用 State 插件的情况下如何管理选定的叶子

How to manage selected leaf given the use of the State plugin

javascript

jquery

jstree