[jQuery Plugin] jQuery Tree Plugins – Dynatree v1.2.1 120819 Updated

jQuery Tree Plugins


120819 Dynatree 文档齐全又清楚, 风格也比较直觉 (比较有 jQuery 风)。
              jsTree 也不错, 功能强大, 不过就是风格比较没有那么直觉, 看文档就知道啦。

※ Tree Plugins 
※ Dynatree 笔记


※ Tree Plugins

◎ jsTree Demo ★★★                                                                                                      
    v1.0pre 2011-7-12 181KB 120819下载    D:@SourcejQueryTreejsTree   

◎ dFTree                                                                                                                             

◎ Martin Wendt -- Dynatree 2009-6-10 Added ★★★★★                                       
     v1.2.1  2012-6-16 101KB 120819下载  D:@SourcejQueryTreeDynatree

  

◎ CoderBay -- Top JQuery Tree Plugins 2011-7-27

◎ 迷失的宇 -- 12款js树形菜单 Javascript tree 树型菜单提供下载 2010-9-11


※ Dynatree 笔记 

     文档:http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html

Note:
‧ onActive, onCustomRender
‧ node.data 
‧ children: title, key, isFolder, url, children, icon
‧ node.FromDict({ title, children... });
‧ isLazy
‧ addClass
‧ tree.selectKey("CCC"), tree.activateKey("CCC") 延迟产生, 在 init 抓不到

 3 Quick start

  

   $("#tree").dynatree({
       onActivate: function(node) {
       },
       persist: true,
       children: [
           { title: "Item 1"},
           { title: "Folder 2", isFolder: true,
               children: [
                   {title: "Sub-item 2.1"},
                   {title: "Sub-item 2.2"}
               ]
           },
           { title: "Item 3"}
       ]
   });

4.1 Tree options

$("#tree").dynatree({
    title: "Dynatree", // Tree's name (only used for debug outpu)
    minExpandLevel: 1, // 1: root node is not collapsible
    imagePath: null, // Path to a folder containing icons. Defaults to 'skin/' subdirectory.
    children: null, // Init tree structure from this object array.
    initId: null, // Init tree structure from a  tags for all nodes
    // Low level event handlers: onEvent(dtnode, event): return false, to stop default processing
    onClick: null, // null: generate focus, expand, activate, select events.
    onDblClick: null, // (No default actions.)
    onKeydown: null, // null: generate keyboard navigation (focus, expand, activate).
    onKeypress: null, // (No default actions.)
    onFocus: null, // null: set focus to node.
    onBlur: null, // null: remove focus from node.

    // Pre-event handlers onQueryEvent(flag, dtnode): return false, to stop processing
    onQueryActivate: null, // Callback(flag, dtnode) before a node is (de)activated.
    onQuerySelect: null, // Callback(flag, dtnode) before a node is (de)selected.
    onQueryExpand: null, // Callback(flag, dtnode) before a node is expanded/collpsed.

    // High level event handlers
    onPostInit: null, // Callback(isReloading, isError) when tree was (re)loaded.
    onActivate: null, // Callback(dtnode) when a node is activated.
    onDeactivate: null, // Callback(dtnode) when a node is deactivated.
    onSelect: null, // Callback(flag, dtnode) when a node is (de)selected.
    onExpand: null, // Callback(flag, dtnode) when a node is expanded/collapsed.
    onLazyRead: null, // Callback(dtnode) when a lazy node is expanded for the first time.
    onCustomRender: null, // Callback(dtnode) before a node is rendered. Return a HTML string to override.
    onCreate: null, // Callback(dtnode, nodeSpan) after a node was rendered for the first time.
    onRender: null, // Callback(dtnode, nodeSpan) after a node was rendered.
    postProcess: null, // Callback(data, dataType) before an Ajax result is passed to dynatree.

    // Drag'n'drop support
    dnd: {
        // Make tree nodes draggable:
        onDragStart: null, // Callback(sourceNode), return true, to enable dnd
        onDragStop: null, // Callback(sourceNode)
        // Make tree nodes accept draggables
        autoExpandMS: 1000, // Expand nodes after n milliseconds of hovering.
        preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
        onDragEnter: null, // Callback(targetNode, sourceNode)
        onDragOver: null, // Callback(targetNode, sourceNode, hitMode)
        onDrop: null, // Callback(targetNode, sourceNode, hitMode)
        onDragLeave: null // Callback(targetNode, sourceNode)
    },
    ajaxDefaults: { // Used by initAjax option
        cache: false, // false: Append random '_' argument to the request url to prevent caching.
        timeout: 0, // >0: Make sure we get an ajax error for invalid URLs
        dataType: "json" // Expect json format and pass json object to callbacks.
    },
    strings: {
        loading: "Loading…",
        loadError: "Load error!"
    },
    generateIds: false, // Generate id attributes like 
    idPrefix: "dynatree-id-", // Used to generate node id's like .
    keyPathSeparator: "/", // Used by node.getKeyPath() and tree.loadKeyPath().
    cookieId: "dynatree", // Choose a more unique name, to allow multiple trees.
    cookie: {
        expires: null // Days or Date; null: session cookie
    },
    // Class names used, when rendering the HTML markup.
    // Note: if only single entries are passed for options.classNames, all other
    // values are still set to default.
    classNames: {
        container: "dynatree-container",
        node: "dynatree-node",
        folder: "dynatree-folder",

        empty: "dynatree-empty",
        vline: "dynatree-vline",
        expander: "dynatree-expander",
        connector: "dynatree-connector",
        checkbox: "dynatree-checkbox",
        nodeIcon: "dynatree-icon",
        title: "dynatree-title",
        noConnector: "dynatree-no-connector",

        nodeError: "dynatree-statusnode-error",
        nodeWait: "dynatree-statusnode-wait",
        hidden: "dynatree-hidden",
        combinedExpanderPrefix: "dynatree-exp-",
        combinedIconPrefix: "dynatree-ico-",
        hasChildren: "dynatree-has-children",
        active: "dynatree-active",
        selected: "dynatree-selected",
        expanded: "dynatree-expanded",
        lazy: "dynatree-lazy",
        focused: "dynatree-focused",
        partsel: "dynatree-partsel",
        lastsib: "dynatree-lastsib"
    },
    debugLevel: 1 // 0:quiet, 1:normal, 2:debug
});

children: [
    {
    title: null, // (required) Displayed name of the node (html is allowed here)
    key: null, // May be used with activate(), select(), find(), ...
    isFolder: false, // Use a folder icon. Also the node is expandable but not selectable.
    isLazy: false, // Call onLazyRead(), when the node is expanded for the first time to allow for delayed creation of children.
    tooltip: null, // Show this popup text.
    href: null, // Added to the generated  tag.
    icon: null, // Use a custom image (filename relative to tree.options.imagePath). 'null' for default icon, 'false' for no icon.
    addClass: null, // Class name added to the node's span tag.
    noLink: false, // Use  instead of  tag for this node
    activate: false, // Initial active status.
    focus: false, // Initial focused status.
    expand: false, // Initial expanded status.
    select: false, // Initial selected status.
    hideCheckbox: false, // Suppress checkbox display for this node.
    unselectable: false, // Prevent selection.
    // The following attributes are only valid if passed to some functions:
    children: null // Array of child nodes.
    // NOTE: we can also add custom attributes here.
    // This may then also be used in the onActivate(), onSelect() or onLazyTree() callbacks.
    },
    […]
]

4.2.5 Initializing the tree structure from a