Skip to content

TutorialExtensions

Jump to bottom Edit New page
Martin Wendt edited this page Dec 27, 2021 · 22 revisions

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

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 tree's extensions option.
  3. Optionally define options and event handlers.
    Extensions expose additional options in an property of the same name, e.g. the table extension 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.

Documentation Home - Project Page - Copyright (c) 2008-2022, Martin Wendt (https://wwWendt.de)

Index

Clone this wiki locally