Skip to content
Martin edited this page May 14, 2015 · 29 revisions

About Fancytree extensions.

Part of Fancytrees functionality is factored out into separate modules, called 'extensions' (see the tutorial for a list).

This page is about

  1. Using existing Fancytree extensions, and
  2. Writing your own Fancytree extensions

Using Fancytree Extensions

  1. Include extension module (after jQuery, jQueryUI, and the core fancytree libraries).
    Optionally include associated style sheets.
  2. Enable the extension in the trees extensions option.
  3. Optionally define options and event handlers for that extension

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-1.11.3.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
    <link href="../src/skin-themeroller/ui.fancytree.css" rel="stylesheet" type="text/css">

    <script src="../src/jquery.fancytree.js" type="text/javascript"></script>
    <script src="../src/jquery.fancytree.filter.js" type="text/javascript"></script>
    <script src="../src/jquery.fancytree.table.js" type="text/javascript"></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.

Writing your own Fancytree extensions

See the annotated source of the 'childcounter' extension for an introduction.

Clone this wiki locally