Skip to content

TutorialIntegration

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

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');
})

or

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.

  1. Install jQuery and Fancytree via npm:
    npm install jquery jquery.fancytree

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

  3. 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"
        ]

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

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

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

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

  6. Import your Fancytree css inside styles.css file:

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

  7. Add Fancytree html to html component, e.g.:

    <div id="tree"></div>

  8. import jQuery and Fancytree in your typescript file:

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

  9. 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'}]
     });
     //
   });
//

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

Index

Clone this wiki locally