Fancytree Javascript Tree TreeTable 树介绍和使用

最新推荐文章于 2024-05-10 09:49:59 发布

weixin_30718391

最新推荐文章于 2024-05-10 09:49:59 发布

阅读量439

点赞数

文章标签： ui json javascript ViewUI

原文链接：http://www.cnblogs.com/zhengshuangliang/p/4642987.html

版权

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:

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)

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:

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

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:

Return Type	Name and Arguments	Details
void	`nodeClick(ctx)` Default handling for mouse click events.	Details
void	`nodeCollapseSiblings(ctx, callOpts)` Collapse all other children of same parent.	Details
void	`nodeDblclick(ctx)` Default handling for mouse douleclick events.	Details
void	`nodeKeydown(ctx)` Default handling for mouse keydown events. NOTE: this may be called with node == null if tree (but no node) has focus.	Details
$.Promise	`nodeLoadChildren(ctx, source)` Load child nodes (async).	Details
void	`nodeLoadKeyPath()` [Not Implemented]	Details
void	`nodeRemoveChild(ctx, childNode)` Remove a single direct child of ctx.node.	Details
void	`nodeRemoveChildMarkup(ctx)` Remove HTML markup for all descendents of ctx.node.	Details
void	`nodeRemoveChildren(ctx)` Remove all descendants of ctx.node.	Details
void	`nodeRemoveMarkup(ctx)` Remove HTML markup for ctx.node and all its descendents.	Details
void	`nodeRender(ctx, force=false, deep=false, collapsed=false)` Create `<li><span>..</span> .. </li>` tags for this node. This method takes care that all HTML markup is created that is required to display this node in it's current state. Call this method to create new nodes, or after the strucuture was changed (e.g. after moving this node or adding/removing children) nodeRenderTitle() and nodeRenderStatus() are implied. Note: if a node was created/removed, nodeRender() must be called for the parent.< code>< li id='KEY' ftnode=NODE> <span class='fancytree-node fancytree-expanded fancytree-has-children fancytree-lastsib fancytree-exp-el fancytree-ico-e'> <span class="fancytree-expander"></span> <span class="fancytree-checkbox"></span> // only present in checkbox mode <span class="fancytree-icon"></span> <a href="#" class="fancytree-title"> Node 1 </a> </span> <ul> // only present if node has children <li id='KEY' ftnode=NODE> child1 ... </li> <li id='KEY' ftnode=NODE> child2 ... </li> </ul>< /li>< /code>	Details
void	`nodeRenderStatus(ctx)` Update element classes according to node state.	Details
void	`nodeRenderTitle(ctx, title)` Create HTML inside the node's outer <span> (i.e. expander, checkbox, icon, and title). nodeRenderStatus() is implied.	Details
$.Promise	`nodeSetActive(ctx, flag=true, opts)` Activate node. flag defaults to true. If flag is true, the node is activated (must be a synchronous operation) If flag is false, the node is deactivated (must be a synchronous operation)	Details
$.Promise	`nodeSetExpanded(ctx, flag=true, opts)` Expand or collapse node, return Deferred.promise.	Details
void	`nodeSetFocus(ctx, flag=true)` Focus or blur this node.	Details
void	`nodeSetSelected(ctx, flag=true)` (De)Select node, return new status (sync).	Details
void	`nodeSetStatus(ctx, status, message, details)` Show node status (ok, loading, error) using styles and a dummy child node.	Details
void	`nodeToggleExpanded(ctx)`	Details
void	`nodeToggleSelected(ctx)`	Details
void	`treeClear(ctx)` Remove all nodes.	Details
void	`treeCreate(ctx)` Widget was created (called only once, even it re-initialized).	Details
void	`treeDestroy(ctx)` Widget was destroyed.	Details
void	`treeInit(ctx)` Widget was (re-)initialized.	Details
void	`treeLoad(ctx, source)` Parse Fancytree from source, as configured in the options.	Details
void	`treeRegisterNode(ctx, add, node)` Node was inserted into or removed from the tree.	Details
void	`treeSetFocus(ctx, flag=true)` Widget got focus.

学习资料：

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/

转载于:https://www.cnblogs.com/zhengshuangliang/p/4642987.html

weixin_30718391

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Fancytree Javascript Tree TreeTable 树介绍和使用

Fancytree是一个非常棒的Javascript控件，功能强大，文档健全。在做Javascript Tree控件选型时，主要基于以下几点选择了Fancytree在Javascript Tree控件中，Fancytree的排名非常靠前，说明这个控件的用户使用量多、口碑好，当出现问题时在StackOverflow中容易找到答案支持checkbox选择框支持Tree Tablec...
复制链接

扫一扫