TutorialIntegration

About integration of Fancytree into existing frameworks.

Recipes

[Howto] Use Webpack

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'
    }),
    ...
  ],
  ...
}

[Howto] Run Fancytree with Angular 4

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-cli.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-cli.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. Add Fancytree html to html component, e.g.:

   <div id="tree">
     <ul>
       <li>Root node 1
         <ul>
           <li>Child node 1</li>
           <li>Child node 2</a></li>
         </ul>
       </li>
     </ul>
   </div>

7. Add jQery Fancytree to your typescript file, e.g.:

   ngOnInit() {
     $('#tree').fancytree();
   }

[Howto] Use Fancytree with with requirejs

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