Logo Logo

Documentation v1.1.5

Preview
Light
Dark
System
jsTree is jquery plugin, that provides interactive trees. For more info please visit the plugin's Home or 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. 
$('#kt_docs_jstree_customicons').jstree({
    "core" : {
        "themes" : {
            "responsive": false
        }
    },
    "types" : {
        "default" : {
            "icon" : "ki-outline ki-older text-warning"
        },
        "file" : {
            "icon" : "ki-outline ki-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" : "ki-outline ki-user 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" : "ki-outline ki-notification-status 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>
try metronic buy mega bundle
Preview Get Help Buy Now