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 dta format, so it mght not be the most efficient way to pass data.
  2. source: <Ajax options>
  3. source: <NodeData array>
  4. source: <$.Promise>
  5. 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