Fancytree Javascript Tree TreeTable 树介绍和使用

Fancytree是一个非常棒的Javascript控件，功能强大，文档健全。在做Javascript Tree控件选型时，主要基于以下几点选择了Fancytree

在Javascript Tree控件中，Fancytree的排名非常靠前，说明这个控件的用户使用量多、口碑好，当出现问题时在StackOverflow中容易找到答案
支持checkbox选择框
支持Tree Table
checkbox选择框有三种状态，并可以disable掉checkbox选择框
丰富的示例展示和代码展示、详尽的介绍文档、丰富的事件支持
以下几方面虽然未使用到，但也是他很好的功能：节点可编辑、拖拽、过滤、全选、统计子节点、延迟加载、皮肤设置、事件钩子支持、右键菜单、树内部可加入多种控件

1. 前提条件---构建一颗Fancytree最基本的前提条件
2. 基础配置---完成一颗最基本的树结构所需做的配置
3. Fancytree所有配置项。名称、类型、介绍
4. Fancytree的Event（事件）预览、使用及介绍
5. Fancytree的属性、方法、参数及使用案例
6. FancytreeNode的属性、方法、参数及使用案例
7. 通过Javascript获取Fancytree、FancytreeNode对象和属性
8. Fancytree的事件钩子使用

9. 实用资料

1.前提条件---构建一颗Fancytree最基本的前提条件。

　　下面代码展示了需要构建一颗Fancytree的基本条件，如：Javascript、css、HTML元素（#tree）。特别注意，这里需要jquery-ui的js。

<head>

  [...]

  <!-- Include jQuery and jQuery UI -->

  <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

  <!-- Include Fancytree skin and library -->

  <link href="fancytree/skin-win8/ui.fancytree.min.css" rel="stylesheet" type="text/css">

  <script src="fancytree/jquery.fancytree-all.min.js" type="text/javascript"></script>

  <!-- Initialize the tree when page is loaded -->

  <script type="text/javascript">

    $(function(){

      // 具体如何给树传入数据请看第2条：基础配置

　　　 //Create the tree inside the <div id="tree"> element.

      $("#tree").fancytree({ ... });

    });

  </script>

</head>

<body>

  [...]

  <!-- Define where the tree should appear -->

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

  [...]

</body>

</html>

2.基础配置---完成一颗最基本的树结构所需做的配置

　　给Fancytree赋一个最基本的Json数据

<head>

  [...]

  <!-- Include jQuery and jQuery UI -->

  <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

  <!-- Include Fancytree skin and library -->

  <link href="fancytree/skin-win8/ui.fancytree.min.css" rel="stylesheet" type="text/css">

  <script src="fancytree/jquery.fancytree-all.min.js" type="text/javascript"></script>

  <!-- Initialize the tree when page is loaded -->

  <script type="text/javascript">

    $(function(){

      // 初始化数据内容,可以是json格式、文件、连接等。具体还有什么属性、方法、时间、钩子请看下面的内容

$("#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" }

　　　　　　　　]}

　　　　　　　]

});

    });

</script>

</head>

<body>

  [...]

  <!-- Define where the tree should appear -->

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

  [...]

</body>

</html>

3. Fancytree所有配置项。名称、类型、介绍

Name	Type	Description
activeVisible	Boolean	Make sure that the active node is always visible, i.e. its parents are expanded (default: true).
ajax	object	Default options for ajax requests
aria	Boolean	(default: false) Add WAI-ARIA attributes to markup
autoActivate	Boolean	Activate a node when focused with the keyboard (default: true)
autoCollapse	Boolean	Automatically collapse all siblings, when a node is expanded (default: false).
autoScroll	Boolean	Scroll node into visible area, when focused by keyboard (default: false).
checkbox	Boolean	Display checkboxes to allow selection (default: false)
clickFolderMode	Integer	Defines what happens, when the user click a folder node.
clickFolderMode	Integer	1:activate, 2:expand, 3:activate and expand, 4:activate/dblclick expands (default: 4)
debugLevel	Integer	0..2 (null: use global setting $.ui.fancytree.debugInfo)
defaultKey	function	callback(node) is called for ner nodes without a key. Must return a new unique key. (default null: generates default keys like that: "_" + counter)
enableAspx	Boolean	Accept passing ajax data in a property named `d` (default: true).
extensions	String[]	List of active extensions (default: [])
focusOnSelect	Boolean	Set focus when node is checked by a mouse click (default: false)
generateIds	Boolean	Add `id="..."` to node markup (default: false).
icons	Boolean	Display node icons (default: true)
idPrefix	String	(default: "ft_")
imagePath	String	Path to a folder containing icons (default: null, using 'skin/' subdirectory).
keyboard	Boolean	Support keyboard navigation (default: true).
keyPathSeparator	String	(default: "/")
minExpandLevel	Integer	2: top-level nodes are not collapsible (default: 1)
quicksearch	Boolean	navigate to next node by typing the first letters (default: false)
scrollOfs:	object	optional margins for node.scrollIntoView() (default: {top: 0, bottom: 0})
scrollParent:	jQuery	scrollable container for node.scrollIntoView() (default: $container)
selectMode	Integer	1:single, 2:multi, 3:multi-hier (default: 2)
source	any	Used to Initialize the tree.
strings	object	Translation table
tabbable	Boolean	Add tabindex='0' to container, so tree can be reached using TAB
titlesTabbable	Boolean	Add tabindex='0' to node title span, so it can receive keyboard focus
toggleEffect	object	Animation options, false:off (default: { effect: "blind", options: {direction: "vertical", scale: "box"}, duration: 200 })

4.Fancytree的Event（事件）预览、使用及介绍

<script type="text/javascript">

    $.ui.fancytree.debugLevel = 1; // silence debug output

    function logEvent(event, data, msg){

//        var args = $.isArray(args) ? args.join(", ") :

        msg = msg ? ": " + msg : "";

        $.ui.fancytree.info("Event('" + event.type + "', node=" + data.node + ")" + msg);

    }

    $(function(){

        $("#tree").fancytree({

            checkbox: true,

            // --- Tree events -------------------------------------------------

            blurTree: function(event, data) {

                logEvent(event, data);

            },

            create: function(event, data) {

                logEvent(event, data);

            },

            init: function(event, data, flag) {

                logEvent(event, data, "flag=" + flag);

            },

            focusTree: function(event, data) {

                logEvent(event, data);

            },

            restore: function(event, data) {

                logEvent(event, data);

            },

            // --- Node events -------------------------------------------------

            activate: function(event, data) {

                logEvent(event, data);

                var node = data.node;

                // acces node attributes

                $("#echoActive").text(node.title);

                if( !$.isEmptyObject(node.data) ){

//                    alert("custom node data: " + JSON.stringify(node.data));

                }

            },

            beforeActivate: function(event, data) {

                logEvent(event, data, "current state=" + data.node.isActive());

                // return false to prevent default behavior (i.e. activation)

//              return false;

            },

            beforeExpand: function(event, data) {

                logEvent(event, data, "current state=" + data.node.isExpanded());

                // return false to prevent default behavior (i.e. expanding or collapsing)

//                return false;

            },

            beforeSelect: function(event, data) {

//                console.log("select", event.originalEvent);

                logEvent(event, data, "current state=" + data.node.isSelected());

                // return false to prevent default behavior (i.e. selecting or deselecting)

//                if( data.node.isFolder() ){

//                    return false;

//                }

            },

            blur: function(event, data) {

                logEvent(event, data);

                $("#echoFocused").text("-");

            },

            click: function(event, data) {

                logEvent(event, data, ", targetType=" + data.targetType);

                // return false to prevent default behavior (i.e. activation, ...)

                //return false;

            },

            collapse: function(event, data) {

                logEvent(event, data);

            },

            createNode: function(event, data) {

                // Optionally tweak data.node.span or bind handlers here

                logEvent(event, data);

            },

            dblclick: function(event, data) {

                logEvent(event, data);

//                data.node.toggleSelect();

            },

            deactivate: function(event, data) {

                logEvent(event, data);

                $("#echoActive").text("-");

            },

            expand: function(event, data) {

                logEvent(event, data);

            },

            focus: function(event, data) {

                logEvent(event, data);

                $("#echoFocused").text(data.node.title);

            },

            keydown: function(event, data) {

                logEvent(event, data);

                switch( event.which ) {

                case 32: // [space]

                    data.node.toggleSelected();

                    return false;

                }

            },

            keypress: function(event, data) {

                // currently unused

                logEvent(event, data);

            },

            lazyLoad: function(event, data) {

                logEvent(event, data);

                // return children or any other node source

                data.result = {url: "ajax-sub2.json"};

//                data.result = [

//                    {title: "A Lazy node", lazy: true},

//                    {title: "Another node", selected: true}

//                    ];

            },

            loadChildren: function(event, data) {

                logEvent(event, data);

            },

            loadError: function(event, data) {

                logEvent(event, data);

            },

            postProcess: function(event, data) {

                logEvent(event, data);

                // either modify the ajax response directly

                data.response[0].title += " - hello from postProcess";

                // or setup and return a new response object

//                data.result = [{title: "set by postProcess"}];

            },

            removeNode: function(event, data) {

                // Optionally release resources

                logEvent(event, data);

            },

            renderNode: function(event, data) {

                // Optionally tweak data.node.span

//              $(data.node.span).text(">>" + data.node.title);

                logEvent(event, data);

            },

            renderTitle: function(event, data) {

                // NOTE: may be removed!

                // When defined, must return a HTML string for the node title

                logEvent(event, data);

//                return "new title";

            },

            select: function(event, data) {

                logEvent(event, data, "current state=" + data.node.isSelected());

                var s = data.tree.getSelectedNodes().join(", ");

                $("#echoSelected").text(s);

            }

        }).bind("fancytreeactivate", function(event, data){

            // alternative way to bind to 'activate' event

//            logEvent(event, data);

        }).on("mouseenter mouseleave", ".fancytree-title", function(event){

            // Add a hover handler to all node titles (using event delegation)

            var node = $.ui.fancytree.getNode(event);

            node.info(event.type);

        });

        $("#btnSelect").click(function(event){

            var node = $("#tree").fancytree("getActiveNode");

            node.setSelected( !node.isSelected() );

        });

        $("#btnRemove").click(function(event){

            var node = $("#tree").fancytree("getActiveNode");

            node.remove();

        });

    });

</script>

Name	Type	Description
activate	function	`data.node` was activated
beforeActivate	function	Return `false` to prevent default processing
beforeExpand	function	Return `false` to prevent default processing
beforeSelect	function	Return `false` to prevent default processing
blur	function	`data.node` lost keyboard focus
blurTree	function	`data.tree` lost keyboard focus
click	function	`data.node` was clicked. `data.targetType` contains the region ("title", "expander", ...). Return `false` to prevent default processing, i.e. activating, etc.
collapse	function	`data.node` was collapsed
create	function	Widget was created (called only once, even if re-initialized).
createNode	function	Allow tweaking and binding, after node was created for the first time (NOTE: this event is only available as callback, but not for bind())
dblclick	function	`data.node` was double-clicked. `data.targetType` contains the region ("title", "expander", ...). Return `false` to prevent default processing, i.e. expanding, etc.
deactivate	function	`data.node` was deactivated
expand	function	`data.node` was expanded
focus	function	`data.node` received keyboard focus
focusTree	function	`data.tree` received keyboard focus
init	function	Widget was (re-)initialized.
keydown	function	`data.node` received key. `event.which` contains the key. Return `false` to prevent default processing, i.e. navigation. Call `data.result = "preventNav";` to prevent navigation but still allow default handling inside embedded input controls.
keypress	function	(currently unused)
lazyLoad	function	`data.node` is a lazy node that is expanded for the first time. The new child data must be returned in the `data.result` property (see `source` option for available formats).
loadChildren	function	Node data was loaded, i.e. `node.nodeLoadChildren()` finished
loadError	function	A load error occured. Return `false` to prevent default processing
postProcess	function	Allows to modify the ajax response
removeNode	function	`data.node` was removed (NOTE: this event is only available as callback, but not for bind())
renderColumns	function	(used by table extension)
renderNode	function	Allow tweaking after node state was rendered (NOTE: this event is only available as callback, but not for bind())
renderTitle	function	Allow replacing the `<span class='fancytree-title'>` markup (NOTE: this event is only available as callback, but not for bind())
restore	function	ext-persist has expanded, selected, and activated the previous state
select	function	`data.node` was selected

5.Fancytree的属性、方法、参数及使用案例

Properties:

Type	Name	Description
FancytreeOptions	`options`
FancytreeNode	`rootNode`
FancytreeNode	`activeNode`
FancytreeNode	`focusNode`
jQueryObject	`$div`
object	`widget`
object	`ext`
object	`data`
object	`options`
string	`_id`
string	`statusClassPropName`
string	`ariaPropName`
string	`nodeContainerAttrName`
string	`$container`
FancytreeNode	`lastSelectedNode`

Methods:

activateKey(key)

-->

applyPatch(patchList)

-->

changeRefKey(oldRefKey, newRefKey)

-->

clearCookies()

-->

clearFilter()

-->

count()

-->

debug(msg)

-->

filterBranches(filter, opts={autoExpand: false})

-->

filterNodes(filter, opts={autoExpand: false, leavesOnly: false})

-->

findNextNode(match, startNode)

-->

generateFormElements(selected=true, active=true, opts)

-->

getActiveNode()

-->

getFirstChild()

-->

getFocusNode()

-->

getNodeByKey(key, searchRoot)

-->

getNodesByRef(refKey, rootNode)

-->

getPersistData()

-->

getRootNode()

-->

getSelectedNodes(stopOnParents=false)

-->

hasFocus()

-->

info(msg)

-->

isEditing()

-->

loadKeyPath(keyPathList, callback)

-->

reactivate()

-->

reload(source)

-->

render(force=false, deep=false)

-->

setFocus(flag=true)

-->

toDict(includeRoot=false, callback(node))

-->

visit(fn)

-->

6.FancytreeNode的属性、方法、参数及使用案例

new FancytreeNode(parent, obj)

Creates a new FancytreeNode

Parameters:

Name	Type	Description
`parent`	FancytreeNode
`obj`	NodeData

Properties:

Type	Name	Description
Fancytree	`tree`	The tree instance
FancytreeNode	`parent`	The parent node
string	`key`	Node id (must be unique inside the tree)
string	`title`	Display name (may contain HTML)
object	`data`	Contains all extra data that was passed on node creation
FancytreeNode[] \| null \| undefined	`children`	Array of child nodes. For lazy nodes, null or undefined means 'not yet loaded'. Use an empty array to define a node that has no children.
boolean	`expanded`	Use isExpanded(), setExpanded() to access this property.
string	`extraClasses`	Addtional CSS classes, added to the node's `<span>`
boolean	`folder`	Folder nodes have different default icons and click behavior. Note: Also non-folders may have children.
string	`statusNodeType`	null or type of temporarily generated system node like 'loading', or 'error'.
boolean	`lazy`	True if this node is loaded on demand, i.e. on first expansion.
boolean	`selected`	Use isSelected(), setSelected() to access this property.
string	`tooltip`	Alternative description used as hover banner

Methods:

addChildren(children, insertBefore)

-->

addNode(node, mode=child)

-->

appendSibling(node)

-->

applyPatch(patch)

-->

collapseSiblings()

-->

copyTo(node, mode=child, map)

-->

countChildren(deep=true)

-->

debug(msg)

-->

discard()

-->

editCreateNode(mode='child', init)

-->

editEnd(applyChanges=false)

-->

editStart()

-->

findAll(match)

-->

findFirst(match)

-->

fixSelection3AfterClick()

-->

fixSelection3FromEndNodes()

-->

fromDict(dict)

-->

getChildren()

-->

getCloneList(includeSelf=false)

-->

getFirstChild()

-->

getIndex()

-->

getIndexHier()

-->

getKeyPath(excludeSelf=false)

-->

getLastChild()

-->

getLevel()

-->

getNextSibling()

-->

getParent()

-->

getParentList(includeRoot=false, includeSelf=false)

-->

getPrevSibling()

-->

hasChildren()

-->

hasFocus()

-->

info(msg)

-->

isActive()

-->

isChildOf(otherNode)

-->

isClone()

-->

isDescendantOf(otherNode)

-->

isEditing()

-->

isExpanded()

-->

isFirstSibling()

-->

isFolder()

-->

isLastSibling()

-->

isLazy()

-->

isLoaded()

-->

isLoading()

-->

isRootNode()

-->

isSelected()

-->

isStatusNode()

-->

isTopLevel()

-->

isUndefined()

-->

isVisible()

-->

lazyLoad()

-->

load(forceReload=false)

-->

makeVisible(opts)

-->

moveTo(targetNode, mode, map)

-->

navigate(where, activate=true)

-->

remove()

-->

removeChild(childNode)

-->

removeChildren()

-->

render(force=false, deep=false)

-->

renderStatus()

-->

renderTitle()

-->

reRegister(key, refKey)

-->

resetLazy()

-->

scheduleAction(mode, ms)

-->

scrollIntoView(effects=false, options=null)

-->

setActive(flag=true, opts)

-->

setExpanded(flag=true, opts)

-->

setFocus(flag=true)

-->

setSelected(flag=true)

-->

setStatus(status, message, details)

-->

setTitle(title)

-->

sortChildren(cmp, deep=false)

-->

toDict(recursive=false, callback)

-->

toggleExpanded()

-->

toggleSelected()

-->

visit(fn, includeSelf=false)

-->

visitAndLoad(fn, includeSelf=false)

-->

visitParents(fn, includeSelf=false)

-->

7.通过Javascript获取Fancytree、FancytreeNode对象和属性

//获取Id为tree的Fancytree对象

$("#tree").fancytree("getTree")

//获取tree的根节点

$("#tree").fancytree("getRootNode")

//访问每个节点并把节点展开

$("#tree").fancytree("getRootNode").visit(function(node) {

                node.setExpanded(true);

});

8.Fancytree的事件钩子使用

Fancytree_Hooks

These additional methods of the Fancytree class are 'hook functions' that can be used and overloaded by extensions. (See writing extensions.)

Methods:

nodeClick(ctx)

-->

nodeCollapseSiblings(ctx, callOpts)

-->

nodeDblclick(ctx)

-->

nodeKeydown(ctx)

-->

nodeLoadChildren(ctx, source)

-->

nodeLoadKeyPath()

-->

nodeRemoveChild(ctx, childNode)

-->

nodeRemoveChildMarkup(ctx)

-->

nodeRemoveChildren(ctx)

-->

nodeRemoveMarkup(ctx)

-->

nodeRender(ctx, force=false, deep=false, collapsed=false)

-->

nodeRenderStatus(ctx)

-->

nodeRenderTitle(ctx, title)

-->

nodeSetActive(ctx, flag=true, opts)

-->

nodeSetExpanded(ctx, flag=true, opts)

-->

nodeSetFocus(ctx, flag=true)

-->

nodeSetSelected(ctx, flag=true)

-->

nodeSetStatus(ctx, status, message, details)

-->

nodeToggleExpanded(ctx)

-->

nodeToggleSelected(ctx)

-->

treeClear(ctx)

-->

treeCreate(ctx)

-->

treeDestroy(ctx)

-->

treeInit(ctx)

-->

treeLoad(ctx, source)

-->

treeRegisterNode(ctx, add, node)

-->

学习资料：

Github源码及介绍：https://github.com/mar10/fancytree/

在线示例、示例源码、Demo：http://wwwendt.de/tech/fancytree/demo/

基本功能示例介绍（用户指南），右侧分类介绍，Wiki：https://github.com/mar10/fancytree/wiki

最有用的详细API介绍，类、方法、属性、事件、钩子等等。点击右侧分类进入具体的介绍：http://wwwendt.de/tech/fancytree/doc/jsdoc/