CODEWITHSUNDEEP
javascripttreetreeviewjstree
Buttons840
Buttons840

Reputation: 9637

jsTree expands nodes based on the ordering of the initially_selected arguement?

I am using the jsTree jQuery plugin. I have a problem where my tree starts initially expanded.

This is what the user sees upon loading the page:

enter image description here

This is what I want the user to see:

enter image description here

Below is the HTML I have used for testing. What I found is that this behavior is determined by the order of the initially_select arguments. When I have 'initially_select': ['2', '1'] the tree is initially shown expanded. When I have 'initially_select': ['1', '2'] the tree is initially shown closed. By selecting the topmost nodes first, the tree remains closed. However, in my real use-case I have meaningful id's on my nodes, which are not easily sorted; I have no [easy] way to easily determine which items are "topmost" in my tree.

I have tried the solutions suggested here. I have called close_all in the loaded.jstree callback, but it appears that the loaded event callback runs before the initially_selected items are selected. Thus, the jsTree closes all nodes (which are already closed) and then selects several nodes causing many of them to expand again.

All I want is to have my jsTree fully collapsed when the user loads the page.

Here's the HTML for demonstration:

<!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>

Upvotes: 0

Views: 665

Answers (1)

Yoni Baciu
Yoni Baciu

Reputation: 2707

Try testing it with jquery 1.6.4.

I have problems using jstree with jquery 1.7.x and had to revert back to 1.6.4

Upvotes: 0

Related Questions