正文

Fancytree Javascript Tree的入门使用

IP云
IP云V管理员/9 阅读
08/10
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、概念----是做什么的能干什么

Fancytree是一个Javascript控件，它依赖于:

<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="ui.fancytree.min.css" rel="stylesheet" />
<script src="jquery.fancytree-all.min.js"></script>

具有以下几个亮点功能：

1)   支持Tree Table

2)   checkbox选择框有三种状态，并可以disable掉checkbox选择框

3)   丰富的示例展示和代码展示、详尽的介绍文档、丰富的事件支持

4)   节点可编辑、拖拽、过滤、全选、统计子节点、延迟加载、皮肤设置、事件钩子支持、右键菜单、树内部可加入多种控件。

二、入门步骤

1）最简陋、基本的树

2）Fancytree所有配置项—名称、类型 的介绍

3）Fancytree的事件的大体使用介绍

4）Fancytree的属性、方法、参数的使用介绍

5）FancytreeNode 的属性、方法、参数的使用介绍

6）JS调取Fancytree、FancytreeNode对象和属性

7）Fancytree的事件钩子使用

备注：实用资料

1)  
最简陋的树

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>fancyTreeTest</title>

<script src="jquery.js"></script>

<script src="jquery-ui.min.js"></script>

<link href="ui.fancytree.min.css" rel="stylesheet" />

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

<script type="text/javascript">

$(function () {

//Create the tree inside the <div id="tree"> element.与zTree类似

// 基础配置，返回数据包括

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

[...]

<!--  show tree  -->

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

[...]

</body>

运行结果为

如果将以上的 body换为

<body>

[...]

<!--  show tree  -->

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

[...]

</body>

运行结果为

最简单的树就完成了。

2）Fancytree所有配置项—名称、类型 的介绍。这些属性也就是说可以在

$("#tree").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.

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 })

3）Fancytree的事件的大体使用介绍

<script>
$.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>

4）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:

Return Type

Name and Arguments

Details

FancytreeNode

activateKey(key)

Activate node with a given key and fire focus and activate events. A prevously activated node will be deactivated. If activeVisible option is set, all parents will be expanded as necessary. Pass key = false, to deactivate the current node only.

Details

$.Promise

applyPatch(patchList)

(experimental)

Details

void

changeRefKey(oldRefKey, newRefKey)

[ext-clones] Replace a refKey with a new one.

Details

void

clearCookies()

[ext-persist] Remove persistence cookies of the given type(s). Called like $("#tree").fancytree("getTree").clearCookies("active expanded focus selected");

Details

void

clearFilter()

[ext-filter] Reset the filter.

Details

integer

count()

Return the number of nodes.

Details

void

debug(msg)

Write to browser console if debugLevel >= 2 (prepending tree name)

Details

integer

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

[ext-filter] Dimm or hide whole branches.

Details

integer

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

[ext-filter] Dimm or hide nodes.

Details

FancytreeNode

findNextNode(match, startNode)

Find the next visible node that starts with `match`, starting at `startNode` and wrap-around at the end.

Details

void

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

Generate INPUT elements that can be submitted with html forms. In selectMode 3 only the topmost selected nodes are considered, unless `opts.stopOnParents: false` is passed.

Details

FancytreeNode

getActiveNode()

Return the currently active node or null.

Details

FancytreeNode | null

getFirstChild()

Return the first top level node if any (not the invisible root node).

Details

FancytreeNode

getFocusNode()

Return node that has keyboard focus or null.

Details

FancytreeNode | null

getNodeByKey(key, searchRoot)

Return node with a given key or null if not found.

Details

FancytreeNode[] | null

getNodesByRef(refKey, rootNode)

[ext-clones] Return all nodes with a given refKey (null if not found).

Details

void

getPersistData()

[ext-persist] Return persistence information from cookies Called like $("#tree").fancytree("getTree").getPersistData();

Details

FancytreeNode

getRootNode()

Return the invisible system root node.

Details

FancytreeNode[]

getSelectedNodes(stopOnParents=false)

Return an array of selected nodes.

Details

boolean

hasFocus()

Return true if the tree control has keyboard focus

Details

void

info(msg)

Write to browser console if debugLevel >= 1 (prepending tree name)

Details

FancytreeNode | null

isEditing()

[ext-edit] Check if any node in this tree in edit mode.

Details

$.Promise

loadKeyPath(keyPathList, callback)

Make sure that a node with a given ID is loaded, by traversing - and loading - its parents. This method is ment for lazy hierarchies. A callback is executed for every node as we go.

Details

void

reactivate()

Re-fire beforeActivate and activate events.

Details

$.Promise

reload(source)

Reload tree from source and return a promise.

Details

void

render(force=false, deep=false)

Render tree (i.e. create DOM elements for all top-level nodes).

Details

void

setFocus(flag=true)

Details

Array | object

toDict(includeRoot=false, callback(node))

Return all nodes as nested list of NodeData.

Details

boolean

visit(fn)

Call fn(node) for all nodes.

Details

void

warn(msg)

Write warning to browser console (prepending tree info)

 

5）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:

Return
Type

Name and
Arguments

Details

FancytreeNode

addChildren(children, insertBefore)

Append (or insert) a list of child nodes.

Details

FancytreeNode

addNode(node, mode=child)

Append or prepend a node, or append a child
node. This a convenience function that calls addChildren()

Details

FancytreeNode

appendSibling(node)

Append new node after this. This a
convenience function that calls addNode(node, 'after')

Details

$.Promise

applyPatch(patch)

Modify existing child nodes.

Details

$.Promise

collapseSiblings()

Collapse all sibling nodes.

Details

FancytreeNode

copyTo(node, mode=child, map)

Copy this node as sibling or child of `node`.

Details

int

countChildren(deep=true)

Count direct and indirect children.

Details

void

debug(msg)

Write to browser console if debugLevel >=
2 (prepending node info)

Details

void

discard()

Deprecated.

Details

void

editCreateNode(mode='child', init)

[ext-edit] Create a new child or sibling node
and start edit mode.

Details

void

editEnd(applyChanges=false)

[ext-edit] Stop inline editing.

Details

void

editStart()

[ext-edit] Start inline editing of current
node title.

Details

FancytreeNode[]

findAll(match)

Find all nodes that contain `match` in the
title.

Details

FancytreeNode

findFirst(match)

Find first node that contains `match` in the
title (not including self).

Details

void

fixSelection3AfterClick()

Fix selection status, after this node was
(de)selected in multi-hier mode. This includes (de)selecting all children.

Details

void

fixSelection3FromEndNodes()

Fix selection status for multi-hier mode.
Only end-nodes are considered to update the descendants branch and parents.
Should be called after this node has loaded new children or after children
have been modified using the API.

Details

void

fromDict(dict)

Update node data. If dict contains
'children', then also replace the hole sub tree.

Details

FancytreeNode[] | undefined

getChildren()

Return the list of child nodes (undefined for
unexpanded lazy nodes).

Details

FancytreeNode[] | null

getCloneList(includeSelf=false)

[ext-clones] Return a list of clone-nodes or
null.

Details

FancytreeNode | null

getFirstChild()

Return the first child node or null.

Details

int

getIndex()

Return the 0-based child index.

Details

string

getIndexHier()

Return the hierarchical child index (1-based,
e.g. '3.2.4').

Details

string

getKeyPath(excludeSelf=false)

Return the parent keys separated by options.keyPathSeparator,
e.g. "id_1/id_17/id_32".

Details

FancytreeNode | null

getLastChild()

Return the last child of this node or null.

Details

int

getLevel()

Return node depth. 0: System root node, 1:
visible top-level node, 2: first sub-level, ... .

Details

FancytreeNode | null

getNextSibling()

Return the successor node (under the same
parent) or null.

Details

FancytreeNode | null

getParent()

Return the parent node (null for the system
root node).

Details

FancytreeNode[]

getParentList(includeRoot=false, includeSelf=false)

Return an array of all parent nodes
(top-down).

Details

FancytreeNode | null

getPrevSibling()

Return the predecessor node (under the same
parent) or null.

Details

boolean | undefined

hasChildren()

Return true if node has children. Return
undefined if not sure, i.e. the node is lazy and not yet loaded).

Details

boolean

hasFocus()

Return true if node has keyboard focus.

Details

void

info(msg)

Write to browser console if debugLevel >=
1 (prepending node info)

Details

boolean

isActive()

Return true if node is active (see also
FancytreeNode#isSelected).

Details

boolean

isChildOf(otherNode)

Return true if node is a direct child of
otherNode.

Details

boolean

isClone()

[ext-clones] Return true if this node has at
least another clone with same refKey.

Details

boolean

isDescendantOf(otherNode)

Return true, if node is a direct or indirect
sub node of otherNode.

Details

Boolean

isEditing()

[ext-edit] Check if this node is in edit
mode.

Details

boolean

isExpanded()

Return true if node is expanded.

Details

boolean

isFirstSibling()

Return true if node is the first node of its
parent's children.

Details

boolean

isFolder()

Return true if node is a folder, i.e. has the
node.folder attribute set.

Details

boolean

isLastSibling()

Return true if node is the last node of its
parent's children.

Details

boolean

isLazy()

Return true if node is lazy (even if data was
already loaded)

Details

boolean

isLoaded()

Return true if node is lazy and loaded. For
non-lazy nodes always return true.

Details

boolean

isLoading()

Return true if children are currently beeing
loaded, i.e. a Ajax request is pending.

Details

boolean

isRootNode()

Return true if this is the (invisible) system
root node.

Details

boolean

isSelected()

Return true if node is selected, i.e. has a
checkmark set (see also FancytreeNode#isActive).

Details

boolean

isStatusNode()

Return true if this node is a temporarily
generated system node like 'loading', or 'error' (node.statusNodeType
contains the type).

Details

boolean

isTopLevel()

Return true if this a top level node, i.e. a
direct child of the (invisible) system root node.

Details

boolean

isUndefined()

Return true if node is lazy and not yet
loaded. For non-lazy nodes always return false.

Details

boolean

isVisible()

Return true if all parent nodes are expanded.
Note: this does not check whether the node is scrolled into the visible part
of the screen.

Details

void

lazyLoad()

Deprecated.

Details

$.Promise

load(forceReload=false)

Load all children of a lazy node if
neccessary. The *expanded* state is maintained.

Details

$.Promise

makeVisible(opts)

Expand all parents and optionally scroll into
visible area as neccessary. Promise is resolved, when lazy loading and
animations are done.

Details

void

moveTo(targetNode, mode, map)

Move this node to targetNode.

Details

$.Promise

navigate(where, activate=true)

Set focus relative to this node and
optionally activate.

Details

void

remove()

Remove this node (not allowed for system
root).

Details

void

removeChild(childNode)

Remove childNode from list of direct
children.

Details

void

removeChildren()

Remove all child nodes and descendents. This
converts the node into a leaf.
If this was a lazy node, it is still considered 'loaded'; call node.resetLazy()
in order to trigger lazyLoad on next expand.

Details

void

render(force=false, deep=false)

This method renders and updates all HTML
markup that is required to display this node in its current state.
Note:

·        
It
should only be neccessary to call this method after the node object was
modified by direct access to its properties, because the common API methods
(node.setTitle(), moveTo(), addChildren(), remove(), ...) already handle
this.

·        
FancytreeNode#renderTitle and FancytreeNode#renderStatus are implied.
If changes are more local, calling only renderTitle() or renderStatus() may
be sufficient and faster.

·        
If
a node was created/removed, node.render() must be called on the parent.

Details

void

renderStatus()

Update element's CSS classes according to
node state.

Details

void

renderTitle()

Create HTML markup for the node's outer
<span> (expander, checkbox, icon, and title).

Details

boolean

reRegister(key, refKey)

[ext-clones] Update key and/or refKey for an
existing node.

Details

void

resetLazy()

Remove all children, collapse, and set the
lazy-flag, so that the lazyLoad event is triggered on next expand.

Details

void

scheduleAction(mode, ms)

Schedule activity for delayed execution
(cancel any pending request). scheduleAction('cancel') will only cancel a
pending request (if any).

Details

$.Promise

scrollIntoView(effects=false, options=null)

Details

$.Promise

setActive(flag=true, opts)

Activate this node.

Details

$.Promise

setExpanded(flag=true, opts)

Expand or collapse this node. Promise is
resolved, when lazy loading and animations are done.

Details

void

setFocus(flag=true)

Set keyboard focus to this node.

Details

void

setSelected(flag=true)

Select this node, i.e. check the checkbox.

Details

void

setStatus(status, message, details)

Mark a lazy node as 'error', 'loading', or
'ok'.

Details

void

setTitle(title)

Rename this node.

Details

void

sortChildren(cmp, deep=false)

Sort child list by title.

Details

NodeData

toDict(recursive=false, callback)

Convert node (or whole branch) into a plain
object. The result is compatible with node.addChildren().

Details

void

toggleExpanded()

Flip expanded status.

Details

void

toggleSelected()

Flip selection status.

Details

boolean

visit(fn, includeSelf=false)

Call fn(node) for all child nodes.
Stop iteration, if fn() returns false. Skip current branch, if fn() returns
"skip".
Return false if iteration was stopped.

Details

$.Promise

visitAndLoad(fn, includeSelf=false)

Call fn(node) for all child nodes and
recursively load lazy children.
Note: If you need this method, you probably should consider to review
your architecture! Recursivley loading nodes is a perfect way for lazy
programmers to flood the server with requests ;-)

Details

boolean

visitParents(fn, includeSelf=false)

Call fn(node) for all parent nodes,
bottom-up, including invisible system root.
Stop iteration, if fn() returns false.
Return false if iteration was stopped.

Details

void

warn(msg)

Write warning to browser console (prepending
node info)

Details

6)JS调取Fancytree、FancytreeNode对象和属

//获取Id为tree的Fancytree对象
$("#tree").fancytree("getTree")//获取tree的根节点
$("#tree").fancytree("getRootNode")//访问每个节点并把节点展开
$("#tree").fancytree("getRootNode").visit(function(node) {
node.setExpanded(true);
})


备注：1）参考大牛：http://wwwendt.de/tech/fancytree/demo/

2）官方文档下载：http://wwwendt.de/tech/fancytree/demo/