Question

我计划使用jsTree来显示树状结构，我希望实现以下行为：

在第一次可视化时我希望扩展所有节点
任何连续的可视化将使用“cookies”插件恢复到树结构的先前状态

约束：

我使用json对象填充树
我无法使用'initial_open'属性列出第一个可视化的ID，因为很难确定初始ID

换句话说，我希望实现类似于a）将节点的默认状态更改为“open”或b）确定这是否是第一个可视化（如果我们不这样做，可能通过检查'cookie'插件属性有状态持续）如果是，那么调用'open_all'

我们很感激。谢谢！

Answer 1

要展开所有节点，只需使用

即可

$("#treeView").jstree("open_all");

您可以将其包含在初始加载中，如此

$('#treeView').jstree(
{
    "themes": {
        "theme": "default",
        "dots": false,
        "icons": false
    },
    "plugins": ["themes", "html_data", "checkbox", "ui"]
}).jstree("set_theme", "apple")
.bind("loaded.jstree", function (event, data) {
    $(this).jstree("open_all");
});

同样，如果要检查所有元素，请使用

$(this).jstree("check_all");

关于cookie，我没有使用它，但有一个名为jquery.cookie.js的插件可用。我想它包含从/向cookie加载/保存数据的方法。您必须绑定另一个事件，例如

.bind("change_state.jstree", function (evt, data) { ... } );

捕获状态更改，loaded.jstree事件中的初始加载将从cookie中读取。请查看this link以了解有关cookie处理的更多信息，两者都有提及 - 如何在有或没有此插件的情况下使用它。

更新： jquery.cookie.js已被js-cookie取代，其中包含Cookie Cookies.set('name', 'value')，var cval = Cookies.get('name');和Cookies.remove('name');的功能处理。

以下代码段是修改后的jsTree example，在Root node 2下面有2个子节点，在加载控件后立即展开：

$(document).ready(function() {
  $('#treeView').jstree({
      'core': {
        'data': [{
            "id": "ajson1",
            "parent": "#",
            "text": "Simple root node"
          },
          {
            "id": "ajson2",
            "parent": "#",
            "text": "Root node 2"
          },
          {
            "id": "ajson3",
            "parent": "ajson2",
            "text": "Child 1"
          },
          {
            "id": "ajson4",
            "parent": "ajson2",
            "text": "Child 2"
          },
        ]
      }
    })
    .bind("loaded.jstree", function(event, data) {
      $(this).jstree("open_all");
    });
});

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

Answer 2

马特的答案都很好，但正如jstree v3所关注的那样，使用ready.jstree事件，长话短说：

$('#treeView').jstree(treeOptions) 
.bind("ready.jstree", function (event, data) {
     $(this).jstree("open_all");
});

jsTree：如何在第一个可视化上展开所有节点，然后使用“cookies”保存和恢复状态＆＃39;插入

2 个答案: