Logo Logo

Documentation v1.1.4

Preview
Light
Dark
System
jsTree is jquery plugin, that provides interactive trees. For more info please visit the plugin's Home or Github Repo.

Ajax Data

Here's a jsTree example with a server side data via AJAX. For more info, please visit the official website.
Note! The tree nodes are loaded from server side demo script via ajax. 
$("#kt_docs_jstree_ajax").jstree({
    "core": {
        "themes": {
            "responsive": false
        },
        // so that create works
        "check_callback": true,
        'data': {
            'url': function(node) {
                return 'https://preview.keenthemes.com/api/jstree/ajax_data.php'; // Demo API endpoint -- Replace this URL with your set endpoint
            },
            'data': function(node) {
                return {
                    'parent': node.id
                };
            }
        }
    },
    "types": {
        "default": {
            "icon": "ki-outline ki-folder text-primary"
        },
        "file": {
            "icon": "ki-outline ki-file  text-primary"
        }
    },
    "state": {
        "key": "demo3"
    },
    "plugins": ["dnd", "state", "types"]
});
<div id="kt_docs_jstree_ajax"></div>
<?php
$parent = $_REQUEST["parent"];

$data = array();

$states = array(
  	"success",
  	"info",
  	"danger",
  	"warning"
);

if ($parent == "#") {
	for($i = 1; $i < rand(4, 7); $i++) {
		$data[] = array(
			"id" => "node_" . time() . rand(1, 100000),  
			"text" => "Node #" . $i, 
			"icon" => "ki-outline ki-folder fs-1 text-" . ($states[rand(0, 3)]),
			"children" => true, 
			"type" => "root"
		);
	}
} else {
	if (rand(1, 5) === 3) {
		$data[] = array(
			"id" => "node_" . time() . rand(1, 100000), 
			"icon" => "ki-outline ki-file text-muted",
			"text" => "No children ",
			"state" => array("disabled" => true),
			"children" => false
		);
	} else {
		for($i = 1; $i < rand(2, 4); $i++) {
			$data[] = array(
				"id" => "node_" . time() . rand(1, 100000), 
				"icon" => ( rand(0, 3) == 2 ? "ki-outline ki-file fs-1" : "ki-outline ki-folder fs-1")." text-" . ($states[rand(0, 3)]),
				"text" => "Node " . time(), 
				"children" => ( rand(0, 3) == 2 ? false : true)
			);
		}
	}
}

header('Content-type: text/json');
header('Content-type: application/json');
header('Access-Control-Allow-Origin: *');
echo json_encode($data);
?>
try metronic buy mega bundle
Preview Get Help Buy Now