How to use JSTree to create a nested tree like list ?

[meer_the_coder]

Question / Problem:

How to use JSTree to create a nested tree like list ?

Answer / Solution:

1. Add the jstree .js and .css files in your .php or .html file
2. Add JQuery in your file.
3. Now add the div as a container of the tree structure

<div id="html" class="demo" style="direction:rtl; text-align:right;">
while ($row = $result->fetchArray()) {
                            $TitleID    = $row['TitleID'];
                            $Title      = $row['Title'];
                            $PageNo     = $row['PageNo'];
                            $ParentID   = $row['ParentID'];
                            if ($ParentID == "1") {
                                echo "
                                <li id='parent-$TitleID'>
                                    <a href='#' onclick='changePage($PageNo)'> $Title</a>
                                </li>";
                            } else {
                                echo "<script>";
                                echo "$('#parent-$ParentID').append(\"" . "<ul><li onclick='changePage($PageNo)'>$Title</li></ul>" . "\");";
                                echo "</script>";
                            }
                        }
</div>

4. This will add a tree structure in your html file.
5. To initialise the jstree with search use this js code

<script>
        function filterTable() {
            var sInput = document.getElementById('searchInput');
            var searchString = sInput.value;
            $('#html').jstree('search', searchString);
        }
        // initialize jstree
        $("#html").jstree({
            'search': {
                'case_insensitive': true,
                'show_only_matches': true
            },
            'plugins': ['search']
        });
    </script>

6. You can find the .js and .css file of jstree from the attachments
7. please use full version of the jquery than the slim version to get it work.

Thanks