This document describes some examples how to use the Fancytree library in different stacks, environments, and scenarios.

NOTE: There are plenty of different use cases. Please provide feedback if something is missing or does not work for you.

Guideline:

Preference
├─ 1. Include via `<script>` tags:
|  ├─ 1.1. Include from assets:
|  |  ├─ Using jQuery UI in your project:
|  |  |    => 1.1.1.
|  |  └─ NOT using jQuery UI in your project:
|  |       => 1.1.2.
|  └─ 1.2. Use a CDN:
|     ├─ Using jQuery UI in your project:
|     |    => 1.2.1.
|     └─ NOT using jQuery UI in your project:
|          => 1.2.2.
├─ 2. Use AMD, require.js, ... (`require()`):
|  ├─ Using jQuery UI in your project:
|  |    => 2.1.
|  └─ NOT using jQuery UI in your project:
|       => 2.2.
└─ 3. Use ES6, Babel, Module loaders (`import`, `require`):
   ├─ Using jQuery UI in your project:
   |    => 3.1.
   └─ NOT using jQuery UI in your project:
        => 3.2.

See also tips for webpack, angular, etc. at the bottom.

1. Simple Include

1.1. Include from Assets

1.1.1. Include from Assets (external UI dependencies)

Fancytree depends on jQuery and a small subset of jQuery UI. If jQuery UI is already part of the project, Fancytree will nicely integrate:

<link href="jquery.fancytree/dist/skin-win8/ui.fancytree.css" rel="stylesheet">
<!-- jQuery and jQuery UI as used by the project -->
<script src="assets/jquery.js"></script>
<script src="assets/jquery-ui.custom.js"></script>
<!-- Bundled Fancytree core and most extensions: -->
<script src="jquery.fancytree/dist/jquery.fancytree-all.min.js"></script>

If you want to cherry-pick extensions, list them separately:

<link href="jquery.fancytree/dist/skin-win8/ui.fancytree.css" rel="stylesheet">
<!-- jQuery and jQuery UI as used by the project -->
<script src="assets/jquery.js"></script>
<script src="assets/jquery-ui.custom.js"></script>
<!-- Fancytree core and selected extensions: -->
<script src="jquery.fancytree/dist/modules/jquery.fancytree.js"></script>
<script src="jquery.fancytree/dist/modules/jquery.fancytree-edit.js"></script>
<script src="jquery.fancytree/dist/modules/jquery.fancytree-filter.js"></script>

1.1.2. Include from Assets (embedded UI dependencies)

But we don't need to pull in jQuery UI explicitly, just for Fancytree. Use the complete 'all-deps' build instead:

<link href="jquery.fancytree/dist/skin-win8/ui.fancytree.css" rel="stylesheet">
<!-- jQuery as used by the project -->
<script src="assets/jquery.js"></script>
<!-- Bundled Fancytree core and most extensions plus required jQuery UI widgets: -->
<script src="jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>

If you want to cherry-pick extensions, list them separately:

<link href="jquery.fancytree/dist/skin-win8/ui.fancytree.css" rel="stylesheet">
<!-- jQuery as used by the project -->
<script src="assets/jquery.js"></script>
<!-- Fancytree core and selected extensions: -->
<script src="jquery.fancytree/dist/modules/jquery.fancytree.ui-deps.js"></script>
<script src="jquery.fancytree/dist/modules/jquery.fancytree.js"></script>
<script src="jquery.fancytree/dist/modules/jquery.fancytree-edit.js"></script>
<script src="jquery.fancytree/dist/modules/jquery.fancytree-filter.js"></script>

1.2. Include from CDN

1.2.1. Include from CDN (external UI dependencies)

<link href="//cdn.jsdelivr.net/npm/[email protected]/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<!-- Bundled Fancytree core and most extensions: -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.fancytree-all.min.js"></script>

1.2.2. Include from CDN (embedded UI dependencies)

<link href="//cdn.jsdelivr.net/npm/[email protected]/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bundled Fancytree core and most extensions plus required jQuery UI widgets: -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.fancytree-all-deps.min.js"></script>

2. AMD (require.js)

2.1. AMD / require.js (External UI Dependencies)

If the project already includes jQuery UI, this should work.

TODO: To be tested that the internal jQuery UI dependencies do not collide with possibly explicit includes.

require([
  'jquery',
  'jquery.fancytree/dist/modules/jquery.fancytree',
  'jquery.fancytree/dist/modules/jquery.fancytree.filter'
], function($) {
  $('#tree').fancytree({...});
});

2.2. AMD / require.js (Embedded UI Dependencies)

The Fancytree core module also pulls in some internal dependencies (jquery.fancytree-ui-deps.js), so this should work, even if the project does not use jQuery UI otherwise:

require([
  'jquery',
  'jquery.fancytree/dist/modules/jquery.fancytree',
  'jquery.fancytree/dist/modules/jquery.fancytree.filter'
], function($) {
  $('#tree').fancytree({...});
});

3. ES6 Modules (or CommonJS)

For example with webpack, we can use the module pattern like so:

import('jquery.fancytree/dist/skin-lion/ui.fancytree.css');  // CSS or LESS
const $ = require('jquery');
const fancytree = require('jquery.fancytree');

$(function(){
  $('#tree').fancytree({
   ...
  });
  const tree = fancytree.getTree('#tree');
})

import 'jquery.fancytree/dist/skin-lion/ui.fancytree.less'
import {createTree, version} from 'jquery.fancytree'
import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';

const tree = createTree('#tree', {
  ...
});

Fancytree (like any jQuery widget) registers itself with a global jQuery/$ namespace.

We use the ProvidePlugin and alias options so that Fancytree's AMD wrapper will register the plugin into the global jQuery instance.

webpack.config.js:

/**
 * Sample Webpack configuration that makes jQuery available and allows to
 *     require('jquery.fancytree')
 */

const path = require('path'),
  webpack = require('webpack'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  ManifestRevisionPlugin = require('manifest-revision-webpack-plugin')

module.exports = {
  entry: {
    ...
  },
  output: {
    ...
  },
  resolve: {
    ...
    alias: {
      // NOTE: Required to load jQuery Plugins into the *global* jQuery instance:
      'jquery': require.resolve('jquery')
    }
  },
  module: {
    rules: [
        { test: /\.js$/i, exclude: /node_modules/, loader: 'babel-loader' },
        { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
        { test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader'] },
        { test: /\.(?:png|jpe?g|svg|gif)$/i, use: [ { loader: 'url-loader', options: {
            limit: 10000  // Inline images smaller than 10kb as data URIs
          } } ]
        }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      // Make jQuery / $ available in every module:
      $: 'jquery',
      jQuery: 'jquery',
      // NOTE: Required to load jQuery Plugins into the *global* jQuery instance:
      jquery: 'jquery'
    }),
    ...
  ],
  ...
}

Recipes

[Howto] Run Fancytree with Angular 8

Note: See also

Contributed by mojo2405

After few days of experimenting I managed to run perfectly Fancytree on Angular 4. You should add it to the manual.

Install jQuery and Fancytree via npm:
npm install jquery jquery.fancytree
Install jQuery and Fancytree typings:
npm install --save @types/jquery @types/jquery.fancytree

Include jQuery and Fancytree in scripts array inside angular.json, e.g.:

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"
        ]

Include Fancytree style inside styles array inside angular.json . e.g.:

"styles": [
    "../node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.min.css"
    ],

Add jQuery and Fancytree to types array inside tsconfig.app.json file, e.g.:

"compilerOptions": {
    ...
    "types": ["jquery","jquery.fancytree"]
}

Import your Fancytree css inside styles.css file:

@import '../node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.min.css'

Add Fancytree html to html component, e.g.:
```
<div id="tree"></div>
```

import jQuery and Fancytree in your typescript file:

...
import * as $ from 'jquery';
const fancytree = require('jquery.fancytree');
...

Add jQuery Fancytree to your typescript file and provide some data, e.g.:

...
ngOnInit() {
  $('#tree').fancytree({
      source: [
        {title: "Node 1", key: "1"},
        {title: "Folder 2", key: "2", folder: true, children: [
          {title: "Node 2.1", key: "3"},
          {title: "Node 2.2", key: "4"}
        ]}
      ]
  });
}
...

[Howto] Use Fancytree with with requirejs

TODO: The following is probably outdated with Fancytree 2.25+.

Contributed by djangosdk

Currently there is very little documentation to show how to work with requirejs with latest version. Here is how made it work with jquery.fancytree-all and latest jquery-ui with AMD support, since working with individual extensions will require a lot of shimming.

requirejs.config({
  paths: {
    'jquery': './js/vendor/jquery',
    'jquery-ui': './js/vendor/jquery-ui',
    'jquery.fancytree': './js/vendor/fancytree/jquery.fancytree-all'
  },
  shim: {
    'jquery.fancytree': {
      deps: ['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'],
      exports: 'jQuery.fn.fancytree'
    }
  },
  onBuildWrite: function (moduleName, path, contents) {
    'use strict';
    if (moduleName === 'jquery.fancytree') {
      contents = 'define( "jquery.fancytree", ["jquery", "jquery-ui/core", "jquery-ui/effect", "jquery-ui/effects/effect-blind", "jquery-ui/widgets/draggable", "jquery-ui/widgets/droppable"], function(jQuery) { ' + contents + '});';
    }
    return contents;
  }
});

// usage
 define([
     'jquery',
     'jquery.fancytree',
     'css!./css/fancytree/skin-custom/ui.fancytree.css',
   ],
   function($) {
     'use strict';
     //
     $('#tree').fancytree({
       checkbox: true,
       source: [{title: 'Node 1'}, {title: 'Node 2',key: 'id2'}]
     });
     //
   });
//

TutorialIntegration - mar10/fancytree GitHub Wiki

1. Simple Include

1.1. Include from Assets

1.1.1. Include from Assets (external UI dependencies)

1.1.2. Include from Assets (embedded UI dependencies)

1.2. Include from CDN

1.2.1. Include from CDN (external UI dependencies)

1.2.2. Include from CDN (embedded UI dependencies)

2. AMD (require.js)

2.1. AMD / require.js (External UI Dependencies)

2.2. AMD / require.js (Embedded UI Dependencies)

3. ES6 Modules (or CommonJS)

Recipes

[Howto] Run Fancytree with Angular 8

[Howto] Use Fancytree with with requirejs

⚠️ GitHub.com Fallback ⚠️

TutorialIntegration - mar10/fancytree GitHub Wiki

1. Simple Include

1.1. Include from Assets

1.1.1. Include from Assets (external UI dependencies)

1.1.2. Include from Assets (embedded UI dependencies)

1.2. Include from CDN

1.2.1. Include from CDN (external UI dependencies)

1.2.2. Include from CDN (embedded UI dependencies)

2. AMD (require.js)

2.1. AMD / require.js (External UI Dependencies)

2.2. AMD / require.js (Embedded UI Dependencies)

3. ES6 Modules (or CommonJS)

Recipes

[Howto] Run Fancytree with Angular 8

[Howto] Use Fancytree with with requirejs

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️