TutorialLoadData

About initializing Fancytree and implementing lazy loading.

This Page is Work In Progress!

Load Tree Data

• Link to demo page
• Show different formats:
  1. Use UL / LI.
     Note that this will be parsed and converted to the internal data format, so it is not the most efficient way to pass data.
     If Javascript is not available however, the UL markup will still be visible to the user.
  2. source: <Ajax options>

2. source: <NodeData array>
3. source: {key1: val1, ..., children: <NodeData array>} 2. source: <$.Promise> 2. source: <callback function>

• Mention tree.reload() and node.reload()
• Sample for JS object Which properties go to 'node.NAME'? All others are stored as 'node.data.NAME'
• Sample for
  /
  • --> which properties can be passed as class? see sample-events: uses data-foo=... and data-json='...'
  • ``` //Boolean attributes that can be set with equivalent class names in the LI tags CLASS_ATTRS = "active expanded focus folder lazy selected unselectable".split(" "), CLASS_ATTR_MAP = {}, // Top-level Fancytree node attributes, that can be set by dict NODE_ATTRS = "expanded extraClasses folder hideCheckbox key lazy selected title tooltip unselectable".split(" "), ```
  • JSON: link to o json.org
  • Link to API-Doc http://www.wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions http://www.wwwendt.de/tech/fancytree/doc/jsdoc/global.html#NodeData
  • Mention 'd' property and http://flask.pocoo.org/docs/security/#json-security
  • Mention postProcess event to modify Ajax return values

  Lazy loading

  • Link to demo page
  • Mention that format is same as 'source'
  • If node.lazy is true and node.children is null or undefined, the lazyload event is triggered. Note that a handler can return an empty array ([]) in order to mark the node as 'no children available'. It then becomes a standard end-node which is not expandable.

  Lazy Loading Sequence Diagram