Documentation v8.0.36

Preview Downloads Purchase

jsTree is jquery plugin, that provides interactive trees. For more info please visit the plugin's Homeor 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": "fa fa-folder text-primary"
        },
        "file": {
            "icon": "fa fa-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" => "fa fa-folder icon-lg kt-font-" . ($states[rand(0, 3)]),
   "children" => true, 
   "type" => "root"
  );
 }
} else {
 if (rand(1, 5) === 3) {
  $data[] = array(
   "id" => "node_" . time() . rand(1, 100000), 
   "icon" => "fa fa-file fa-large kt-font-default",
   "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 ? "fa fa-file icon-lg" : "fa fa-folder icon-lg")." kt-font-" . ($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);
?>