JS插件Fancytree使用分享及源码分析

fancytree

fancytree是一款基于jq和jq-ui的树形插件，相比普通的jsTree，fancytree扩展的功能非常的多，除了checkbox选中，拖拽排序等基础的功能，还有节点过滤，即时编辑，tabletree(在列表中展示jstree)，各种键盘事件，以及各种皮肤样式。
插件地址：https://github.com/mar10/fancytree
当前分享版本：2.22.5

配置介绍

$("#selector").fancytree({
    activeVisible: true, // Make sure, active nodes are visible (expanded)
    aria: true, // Enable WAI-ARIA support
    autoActivate: true, // Automatically activate a node when it is focused using keyboard
    autoCollapse: false, // Automatically collapse all siblings, when a node is expanded
    autoScroll: false, // Automatically scroll nodes into visible area
    clickFolderMode: 4, // 1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)
    checkbox: false, // Show checkboxes
    debugLevel: 2, // 0:quiet, 1:normal, 2:debug
    disabled: false, // Disable control
    focusOnSelect: false, // Set focus when node is checked by a mouse click
    escapeTitles: false, // Escape `node.title` content for display
    generateIds: false, // Generate id attributes like <span id='fancytree-id-KEY'>
    idPrefix: "ft_", // Used to generate node id´s like <span id='fancytree-id-<key>'>
    icon: true, // Display node icons
    keyboard: true, // Support keyboard navigation
    keyPathSeparator: "/", // Used by node.getKeyPath() and tree.loadKeyPath()
    minExpandLevel: 1, // 1: root node is not collapsible
    quicksearch: false, // Navigate to next node by typing the first letters
    rtl: false, // Enable RTL (right-to-left) mode
    selectMode: 2, // 1:single, 2:multi, 3:multi-hier
    tabindex: "0", // Whole tree behaves as one single control
    titlesTabbable: false, // Node titles can receive keyboard focus
    tooltip: false // Use title as tooltip (also a callback could be specified)
});

挑其中几个重点的介绍一下。
autoCollapse：默认false。当设置为true时，fancytree只有当前选中节点展开，其余收缩。
checkbox: 默认false。当设置为true时，展示checkbox。
debugLevel：默认为2。其中0代表纯净版，1为正常，2为debug模式，开发版。推荐release时，设置为0。
icon: 默认true，显示图标。
selectMode：默认为2。其中1为单选，2为多选（但是不会自动勾选上级），3为多选（会自动根据选中节点勾选状态来判断父节点的状态），如果是多选的话，推荐换成3。
unselectableStatus：false会忽略父级的全选，true自动勾选，不受父级的约束。（v.2.23.0）

fancytree使用经验分享

1.插件的引入
传统引入的话，就是通过’script/link’标签去引入jq,jq-ui,和fancytree的js,css。或者使用一些lazyload去引入这些文件也是同样的道理。
ES6模块化引入的话，要麻烦一点，首先在目标文件引入jq,jq-ui,如

import ‘jquery’
import ‘jquery-ui-bundle’;//注意这里
import ‘../../../../plugins/fancytree/dist/jquery.fancytree-all’;

要引入jquery-ui-bundle，即npm i jquery-ui-bundle;普通的jquery-ui引入后，不会报错，但是会缺少ui的相关方法，进而导致fancytree报错，expose-loader个人尝试也不管用，被这个坑了很久。

2.如果是以ajax获取数据资源，渲染tree，并且数据可变的状况下，需要对fancytree重新渲染，即：

this.http.get({appId: this.stateParams.id}, url.coptApp, (totalData) => {
            $("#treetable").fancytree({
                extensions: ["table"],
                checkbox: true,
                table: {
                    indentation: 20,     
                    nodeColumnIdx: 1,     
                    checkboxColumnIdx: 0 
                },
                debugLevel: 0,
                selectMode: 3,
                icon: false,
                source: totalData,
                renderColumns: function (event, data){
                    var node = data.node,
                }
            });
            var newTree = $("#treetable").fancytree("getTree");
            newTree.reload(totalData);//这两句很重要，不然ajax拿到的新数据，不会在view层同步出来。
        })

3.获取选中节点数据

 let selectTree = $("#treetable").fancytree("getTree").rootNode.children;

在选中fancytree的某一个节点后，通过访问rootNode属性，可以获得整个fancytree的source。
在通过递归，去遍历source中的selected属性，可以筛选出自己想要的数据，这样做是最简单的，相反通过selected属性也可以选中checkbox。

 select(selectTree) {
        selectTree.forEach(v => {
            v.selected ? this.selects.push(v.data.id) : false;
            v.children ? this.select(v.children) : false;
        })
    }

源码分析

if ( jq.ui && jq.ui.fancytree ) {
$.ui.fancytree.warn(“Fancytree: ignored duplicate include”);
return;
}

fancytree首先会检测jq-ui是否有fancytree，避免重复声明，因为fancytree的方法是挂在$.ui下面的，在fancytree源码中

$.extend($.ui.fancytree,
    /** @lends Fancytree_Static# */
    {
    /** @type {string} */
    version: "2.22.5",      // Set to semver by 'grunt release'
    /** @type {string} */
    buildType: "production", // Set to 'production' by 'grunt build'
    /** @type {int} */
    debugLevel: 1,            // Set to 1 by 'grunt build'
                              // Used by $.ui.fancytree.debug() and as default for tree.options.debugLevel
    _nextId: 1,
    _nextNodeKey: 1,
    _extensions: {},

}

如果不包含jq-ui的话，也会报错。

function _assert(cond, msg){
    // TODO: see qunit.js extractStacktrace()
    if(!cond){
        msg = msg ? ": " + msg : "";
        // consoleApply("assert", [!!cond, msg]);
        $.error("Fancytree assertion failed" + msg);
    }
}

_assert($.ui, "Fancytree requires jQuery UI (http://jqueryui.com)");

在debug中，可以看到此时的$.ui除了本身所具备的keyboard等自身属性方法，还多了fancytree。

navigate: function(where, activate) {
        var i, parents, res,
            handled = true,
            KC = $.ui.keyCode,
            sib = null;
            ........
            }

之后fancytree在挂靠在$.ui对象之上，扩展了非常多的属性，比如select,remove等等。

如果看源码的话，fancytree写的还是挺庞大的（毕竟差不多涵盖了jstree所能拥有的所有功能），fancytree.js总共大概5000+行（还有一个fancytree.all.js，包含了table等扩展），是一个很老的插件，个人觉得写的还是不错的，有的地方如果能抽离出来就更好了，希望自己之后也可以写出这样大而全的插件。