jsTree in Rails

jsTres is an open source jquery plugin which provides interactive trees. It supports HTML and JSON data with AJAX. It is easily extendable, themeable and configurable. It is useful in creating static and as well as dynamic trees. Dynamic tree works with AJAX, which fetches data from the server.

To begin, download it from jstree and include the dist folder in your assets folder of Rails application.

Setup a container in the view page where the tree should be shown. The container can be as simple as just a div, for example:

<div id="jstree_demo_div"></div>

Once the DOM is ready, jstree instance can be created like:

$(function () { $('#jstree_demo_div').jstree(); });

The selected node can be inspected with:

$("#jstree").on("select_node.jstree", function (event, node) {})

Data about the selected node can also be obtained, some examples:

.text will return the name of node,
.id will return id of the node.

Static tree can be created just by giving some attributes like text, children etc. Children attribute is given as an array of strings. One example is as:

<div id="jstree"></div>

<script>
    $(function () {
        $('#jstree').jstree({
            'core': {
                'data': [
                    'SocialMatic',
                    {
                        'text': 'Accounts',
                        'children': [
                            {
                                'text': 'Users'
                            },
                            {
                                'text' : 'Campaigns',
                                'children' : [
                                    {
                                        'text' : 'MarketPlaceConfig',
                                        'children'  : [
                                            {
                                                'text': 'Products',
                                                'children': ['GooglyResponses', 'Postings','BrokenPostings']
                                            }
                                        ]
                                    },
                                    {
                                        'text' : 'SocialMediaConfig',
                                        'children' : [
                                                'Postings', 'BrokenPostings'
                                        ]
                                    },
                                    'TwitterSms', 'PinterestSms',{
                                        'text':'FacebookSms',
                                        'children' : ['FacebookPageSms']
                                    },'FacebookPageSms','GoogleSms','GooglePageSms'
                                ]
                            }
                        ]
                    }
                ]
            }
        })

The above will generate a static tree. 

An example of script for a dynamic tree:

$('#jstree').jstree({
    'core' : {
        'data': {
            'url': function (node) {
                return node.id === '#' ?
                        '<%=trees_tree_path%>' :
                        '<%=trees_treec_path%>';
            },
            'data': function (node) {
                return {'id': node.id, 'text': node.text};
            }
        }
    }
});

The jsTree will automatically place AJAX request on the url path.