TutorialExtensions - mar10/fancytree GitHub Wiki
About using Fancytree extensions.
Part of Fancytree's functionality is factored out into separate modules, called 'extensions'.
This page is about using Fancytree extensions.
See also
- Include extension module (after jQuery, jQueryUI, and the core fancytree
libraries).
Optionally include associated style sheets. - Enable the extension in the tree's
extensionsoption. - Optionally define options and event handlers.
Extensions expose additional options in an property of the same name, e.g. thetableextension is configured by the options entry.table.
This example uses two extensions ('table' and 'filter'):
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link href="../src/skin-themeroller/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.filter.js"></script>
<script src="../src/jquery.fancytree.table.js"></script>
<script type="text/javascript">
$(function(){
$("#treetable").fancytree({
// Define additional extensions:
extensions: ["filter", "table"],
// Define filter-extension options:
filter: {
mode: "dimm"
},
// Define table-extension options:
table: {
indentation: 24,
nodeColumnIdx: 1
},
// This is a core option
source: {
url: "/getTreeData"
},
// A core event:
activate: function(event, data) {
},
// This event is part of the table extension:
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
$tdList.eq(1).text(node.key);
},
[...]
});
});
</script>
</head>
<body class="example">
<div id="tree"></div>
[...]
</body>
</html>See also the demo page.