Documentation v8.1.1

Preview Downloads Purchase

jsTree is jquery plugin, that provides interactive trees. For more info please visit the plugin's Homeor Github Repo.

Custom Icons & Clickable Nodes

Here's a jsTree example with custom icons and clickable nodes. For more info, please visit the official website.

Root node 1
- Initially selected
- custom icon URL
- initially open
  - Disabled Node
  - Another node
- Custom icon class (bootstrap)
Clickable link node

JAVASCRIPT
HTML

$('#kt_docs_jstree_customicons').jstree({
    "core" : {
        "themes" : {
            "responsive": false
        }
    },
    "types" : {
        "default" : {
            "icon" : "fa fa-folder text-warning"
        },
        "file" : {
            "icon" : "fa fa-file  text-warning"
        }
    },
    "plugins": ["types"]
});

// handle link clicks in tree nodes(support target="_blank" as well)
$('#kt_docs_jstree_customicons').on('select_node.jstree', function(e,data) {
    var link = $('#' + data.selected).find('a');
    if (link.attr("href") != "#" && link.attr("href") != "javascript:;" && link.attr("href") != "") {
        if (link.attr("target") == "_blank") {
            link.attr("href").target = "_blank";
        }
        document.location.href = link.attr("href");
        return false;
    }
});

<div id="kt_docs_jstree_customicons">
    <ul>
        <li>
            Root node 1
            <ul>
                <li data-jstree='{ "selected" : true }'>
                    <a href="javascript:;">
                        Initially selected </a>
                </li>
                    <li data-jstree='{ "icon" : "fonticon-pin text-success fs-4" }'>
                    custom icon URL
                </li>
                <li data-jstree='{ "opened" : true }'>
                    initially open
                    <ul>
                        <li data-jstree='{ "disabled" : true }'>
                            Disabled Node
                        </li>
                        <li data-jstree='{ "type" : "file" }'>
                            Another node
                        </li>
                    </ul>
                </li>
                <li data-jstree='{ "icon" : "fonticon-alarm text-danger fs-7" }'>
                    Custom icon class (bootstrap)
                </li>
            </ul>
        </li>
        <li data-jstree='{ "type" : "file" }'>
            <a href="https://keenthemes.com/">
                Clickable link node </a>
        </li>
    </ul>
</div>