Skip to content

TutorialExtensions

Jump to bottom Edit New page
Martin@MBP edited this page Jan 16, 2014 · 22 revisions

About Fancytree extensions.

This Page is Work In Progress.

Part of Fancytrees functionality is factored out into separate modules, called 'extensions'. Fancytree comes with a number of extensions (see the tutorial).

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 'themeroller'):

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Fancytree - Example</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/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.table.js" type="text/javascript"></script>
    <script src="../src/jquery.fancytree.themeroller.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(function(){
        $("#treetable").fancytree({
            // Define additional extensions:
            extensions: ["table", "themeroller"],
            // Define table-extension options:
            table: {
                indentation: 24,
                nodeColumnIdx: 1
            },
            // This is a core option
            source: {
                url: "/getTreeData"
            },
            // A core event:
            activate: function(e, data) {
            },
            // This event is part of the table extension:
            rendercolumns: function(e, 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.

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

Index

Clone this wiki locally