Basic Tree

Note! Opened and selected nodes will be saved in the user's browser, so when returning to the same tree the previous state will be restored.

								<div id="kt_tree_1" class="tree-demo">
								    <ul>
								        <li>
								            Root node 1
								            <ul>
								                <li data-jstree='{ "selected" : true }'>
								                    <a href="javascript:;">
								                    Initially selected </a>
								                </li>
								                <li data-jstree='{ "icon" : "flaticon2-gear text-success " }'>
								                    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" : "flaticon2-rectangular text-danger" }'>
								                    Custom icon class (bootstrap)
								                </li>
								            </ul>
								        </li>
								        <li data-jstree='{ "type" : "file" }'>
								            <a href="http://www.keenthemes.com">
								            Clickable link node </a>
								        </li>
								    </ul>
								</div>
								

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

Custom Icons & Clickable Nodes


							<div id="kt_tree_2" class="tree-demo">
								<ul>
									<li>
										Root node 1
										<ul>
											<li data-jstree='{ "selected" : true }'>
												<a href="javascript:;">
												Initially selected </a>
											</li>
											<li data-jstree='{ "icon" : "flaticon2-analytics text-success " }'>
												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" : "flaticon2-user text-danger" }'>
												Custom icon class (bootstrap)
											</li>
										</ul>
									</li>
									<li data-jstree='{ "type" : "file" }'>
										<a href="https://keenthemes.com/">
										Clickable link node </a>
									</li>
								</ul>
							</div>
							

							$('#kt_tree_2').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_tree_2').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;
							    }
							});
							

Checkable Tree


							<div id="kt_tree_3" class="tree-demo">
							</div>
							

							$('#kt_tree_3').jstree({
								"plugins": ["wholerow", "checkbox", "types"],
								"core": {
								    "themes": {
								        "responsive": false
								    },
								    "data": [{
								           "text": "Same but with checkboxes",
								            "children": [{
								                "text": "initially selected",
								                "state": {
								                    "selected": true
								                }
								            }, {
								                "text": "custom icon",
								                "icon": "fa fa-warning text-danger"
								            }, {
								                "text": "initially open",
								                "icon": "fa fa-folder text-default",
								                "state": {
								                    "opened": true
								                },
								                "children": ["Another node"]
								            }, {
								                "text": "custom icon",
								                "icon": "fa fa-warning text-waring"
								            }, {
								                "text": "disabled node",
								                "icon": "fa fa-check text-success",
								                "state": {
								                    "disabled": true
								                }
								            }]
								        },
								        "And wholerow selection"
								    ]
								},
								"types": {
								    "default": {
								        "icon": "fa fa-folder text-warning"
								    },
								    "file": {
								        "icon": "fa fa-file  text-warning"
								    }
								},
							});
							

Contextual Menu


							<div id="kt_tree_4" class="tree-demo">
							</div>
							

							$("#kt_tree_4").jstree({
							    "core": {
							        "themes": {
							            "responsive": false
							        },
							        // so that create works
							        "check_callback": true,
							        "data": [{
							                "text": "Parent Node",
							                "children": [{
							                    "text": "Initially selected",
							                    "state": {
							                        "selected": true
							                    }
							                }, {
							                    "text": "Custom Icon",
							                    "icon": "flaticon2-hourglass-1 text-danger"
							                }, {
							                    "text": "Initially open",
							                    "icon": "fa fa-folder text-success",
							                    "state": {
							                        "opened": true
							                    },
							                    "children": [{
							                        "text": "Another node",
							                        "icon": "fa fa-file text-waring"
							                    }]
							                }, {
							                    "text": "Another Custom Icon",
							                    "icon": "flaticon2-drop text-waring"
							                }, {
							                    "text": "Disabled Node",
							                    "icon": "fa fa-check text-success",
							                    "state": {
							                        "disabled": true
							                    }
							                }, {
							                    "text": "Sub Nodes",
							                    "icon": "fa fa-folder text-danger",
							                    "children": [{
							                            "text": "Item 1",
							                            "icon": "fa fa-file text-waring"
							                        },
							                        {
							                            "text": "Item 2",
							                            "icon": "fa fa-file text-success"
							                        },
							                        {
							                            "text": "Item 3",
							                            "icon": "fa fa-file text-default"
							                        },
							                        {
							                            "text": "Item 4",
							                            "icon": "fa fa-file text-danger"
							                        },
							                        {
							                            "text": "Item 5",
							                            "icon": "fa fa-file text-info"
							                        }
							                    ]
							                }]
							            },
							            "Another Node"
							        ]
							    },
							    "types": {
							        "default": {
							            "icon": "fa fa-folder text-primary"
							        },
							        "file": {
							            "icon": "fa fa-file  text-primary"
							        }
							    },
							    "state": {
							        "key": "demo2"
							    },
							    "plugins": ["contextmenu", "state", "types"]
							});
							

Drag & Drop


							<div id="kt_tree_5" class="tree-demo">
							</div>
							

							$("#kt_tree_5").jstree({
							    "core": {
							        "themes": {
							            "responsive": false
							        },
							        // so that create works
							        "check_callback": true,
							        "data": [{
							                "text": "Parent Node",
							                "children": [{
							                    "text": "Initially selected",
							                    "state": {
							                        "selected": true
							                    }
							                }, {
							                    "text": "Custom Icon",
							                    "icon": "flaticon2-warning text-danger"
							                }, {
							                    "text": "Initially open",
							                    "icon": "fa fa-folder text-success",
							                    "state": {
							                        "opened": true
							                    },
							                    "children": [{
							                        "text": "Another node",
							                        "icon": "fa fa-file text-waring"
							                    }]
							                }, {
							                    "text": "Another Custom Icon",
							                    "icon": "flaticon2-bell-5 text-waring"
							                }, {
							                    "text": "Disabled Node",
							                    "icon": "fa fa-check text-success",
							                    "state": {
							                        "disabled": true
							                    }
							                }, {
							                    "text": "Sub Nodes",
							                    "icon": "fa fa-folder text-danger",
							                    "children": [{
							                            "text": "Item 1",
							                            "icon": "fa fa-file text-waring"
							                        },
							                        {
							                            "text": "Item 2",
							                            "icon": "fa fa-file text-success"
							                        },
							                        {
							                            "text": "Item 3",
							                            "icon": "fa fa-file text-default"
							                        },
							                        {
							                            "text": "Item 4",
							                            "icon": "fa fa-file text-danger"
							                        },
							                        {
							                            "text": "Item 5",
							                            "icon": "fa fa-file text-info"
							                        }
							                    ]
							                }]
							            },
							            "Another Node"
							        ]
							    },
							    "types": {
							        "default": {
							            "icon": "fa fa-folder text-success"
							        },
							        "file": {
							            "icon": "fa fa-file  text-success"
							        }
							    },
							    "state": {
							        "key": "demo2"
							    },
							    "plugins": ["dnd", "state", "types"]
							});
							

Ajax Data

Note! The tree nodes are loaded from server side demo script via ajax.

							<div id="kt_tree_6" class="tree-demo">
							</div>
							

							$("#kt_tree_6").jstree({
							    "core": {
							        "themes": {
							            "responsive": false
							        },
							        // so that create works
							        "check_callback": true,
							        "data": {
							            "url": function(node) {
							                return HOST_URL + "api/jstree/ajax_data.php";
							            },
							            "data": function(node) {
							                return {
							                    "parent": node.id
							                };
							            }
							        }
							    },
							    "types": {
							        "default": {
							            "icon": "fa fa-folder text-primary"
							        },
							        "file": {
							            "icon": "fa fa-file  text-primary"
							        }
							    },
							    "state": {
							        "key": "demo3"
							    },
							    "plugins": ["dnd", "state", "types"]
							});
							

							[{
							    "id": "node_158179869559930",
							    "icon": "fa fa-folder icon-lg kt-font-warning",
							    "text": "Node 1581798695",
							    "children": false
							}, {
							    "id": "node_15817986951142",
							    "icon": "fa fa-folder icon-lg kt-font-success",
							    "text": "Node 1581798695",
							    "children": false
							}, {
							    "id": "node_158179869568539",
							    "icon": "fa fa-file icon-lg kt-font-warning",
							    "text": "Node 1581798695",
							    "children": true
							}]
							

Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7

Select A Demo