当前位置: 首页 > 工具软件 > Fancytree > 使用案例 >

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

权承
2023-12-01

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等扩展),是一个很老的插件,个人觉得写的还是不错的,有的地方如果能抽离出来就更好了,希望自己之后也可以写出这样大而全的插件。

 类似资料: