12

我计划使用 jsTree 来可视化树状结构，我想实现以下行为：

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

约束：

  • 我使用 json 对象来填充树
  • 我不能使用“initially_open”属性来列出第一个可视化的 ID，因为很难确定初始 ID

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

想法受到赞赏。谢谢！

4

2 回答 2

16

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

$("#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");

关于cookies，我没用过，但是有个插件叫jquery.cookie.jsavailable。我想它包含从 cookie 加载/保存数据的方法。您必须绑定另一个事件，例如

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

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

更新： jquery.cookie.js已被js-cookie取代，它具有功能Cookies.set('name', 'value')和cookie 处理。var cval = Cookies.get('name');Cookies.remove('name');

以下代码片段是一个修改后的jsTree 示例，其下方有 2 个子节点Root node 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>

于 2013-07-15T12:00:18.743 回答
11

马特的回答很好，但就 jstree v3 而言，请改用ready.jstree事件，长话短说：

$('#treeView').jstree(treeOptions) 
.bind("ready.jstree", function (event, data) {
     $(this).jstree("open_all");
});
于 2016-06-22T10:27:09.017 回答