Question

如果我让用户打开树，选择一个叶子并关闭该页面，那么下次用户打开树时，它们将返回到同一节点＆amp;叶子就像上次关闭页面一样。

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

如果我正在使用'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按钮再次运行小提琴。您将看到所选节点现在已更改为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插件管理选定的叶子

2 个答案: