JS插件Fancytree使用分享及源码分析
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/72582026
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等扩展），是一个很老的插件，个人觉得写的还是不错的，有的地方如果能抽离出来就更好了，希望自己之后也可以写出这样大而全的插件。