jsTree根据最初选择的参数的顺序扩展节点?

时间:2012-03-28 16:32:47

标签: javascript tree treeview jstree

我正在使用jsTree jQuery插件。我有一个问题,我的树最初开始扩展。

这是用户在加载页面时看到的内容:

enter image description here

这是我希望用户看到的内容:

enter image description here

以下是我用于测试的HTML。我发现这种行为是由initially_select参数的顺序决定的。当我'initially_select': ['2', '1']时,树最初显示为展开。当我有'initially_select': ['1', '2']时,树最初显示为已关闭。通过首先选择最顶层的节点,树保持关闭。但是,在我的实际用例中,我的节点上有一个有意义的id,它不容易排序;我没有[简单]方法来轻松确定哪些项目在我的树中是“最顶层”。

我尝试过建议的解决方案here。我在close_all回调中调用了loaded.jstree,但似乎加载的事件回调在选择initially_selected项之前运行。因此,jsTree关闭所有节点(已经关闭),然后选择几个节点,导致其中许多节点再次扩展。

我想要的是在用户加载页面时让我的jsTree完全折叠。

这是用于演示的HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <title>jsTree Test</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
    <div id="my_tree">
    <ul>
        <li>
        <a id="1">Item 1</a>
        <ul>
            <li><a id="2">Item 1.1</a></li>
        </ul>
        </li>
    </ul>
    </div>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.jstree.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#my_tree').jstree(
                {'plugins': ['themes', 'checkbox', 'html_data', 'ui'],
                'checkbox': {'override_ui': true, 'real_checkboxes': true},
                'ui': {'initially_select': ['2', '1']},
                'themes': {'icons': false}}
            );
        });
    </script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

尝试使用jquery 1.6.4进行测试。

我在使用jstree和jquery 1.7.x时遇到问题,不得不恢复到1.6.4