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);
?>
2024©
Keenthemes
