jzaefferer.jquery-treeview
https://github.com/jzaefferer/jquery-treeview
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
JavaScript:
//index.html
<link rel="stylesheet" href="jquery.treeview.css" />
<link rel="stylesheet" href="screen.css" />
<script src="jquery.js"></script> <!-- jQuery JavaScript Library v2.1.4 -->
<script src="jquery.treeview.js" type="text/javascript"></script>
<script src="jquery.treeview.async.js" type="text/javascript"></script>
<script src="jquery.treeview.edit.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
initTree();
$("#refresh").click(function() {
$("#mixed").empty();
initTree();
});
});
function initTree() {
$("#mixed").treeview({
url: "source.php",
collapsed: true,
// add some additional, dynamic data and request with POST
ajax: {
type: "post"
}
});
}
</script>
</head>
<body>
[LIST]
[/LIST]
<button id="refresh">Refresh Tree (is buggy)</button>
JavaScript:
//source.php
<?php
require_once('general.php');
$db = connect();
if (isset($_POST['root']) && $_POST['root'] != "source")
$parentCode = $_POST['root'];
else $parentCode = 0;
$query = "SELECT * FROM codes where parentnode = ".$parentCode." ORDER BY IsFolder asc,NodeName asc";
$rows = getSet($db, $query, null);
$nodes = array();
foreach($rows as $row) {
if ($row['IsFolder'] > 3)
$arr = array("text" => $row['NodeName'], "id" => $row['NodeID'], "hasChildren" => false );
else
$arr = array("text" => $row['NodeName'], "id" => $row['NodeID'], "hasChildren" => true );
$nodes[] = $arr;
}
echo json_encode($nodes);jsTree
https://www.jstree.com/
misc
https://github.com/KSDaemon/jquery-aciTree
http://mbraak.github.io/jqTree/
http://rcardon.free.fr/dbtreeview/ (dhtml with ajax)
bootstrap
https://github.com/gilek/bootstrap-gtreetable
https://github.com/jonmiles/bootstrap-treeview (no ajax support)