JS插件Fancytree使用分享及源码分析
来源:互联网 发布:msn软件 编辑:程序博客网 时间:2024/05/23 23:07
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等扩展),是一个很老的插件,个人觉得写的还是不错的,有的地方如果能抽离出来就更好了,希望自己之后也可以写出这样大而全的插件。
- JS插件Fancytree使用分享及源码分析
- js树形插件fancytree的使用
- bootstrap-button.js插件源码分析
- Bootstrap JS插件Alert源码分析
- dora源码分析及插件书写
- bootstrap源码jQuery插件之button.js源码分析笔记
- SpoolDirectorySource使用及源码分析
- SQLiteOpenHelper使用及源码分析
- HandlerThread源码分析及使用
- IntentService使用及源码分析
- AsyncTask使用及源码分析
- ArrayBlockingQueue源码分析及使用
- swagger使用及源码分析
- ArrayBlockingQueue源码分析及使用
- github上的一些js及jq插件分享
- js分享插件
- iShare.js分享插件
- 【源码分享】WPF漂亮界面框架实现原理分析及源码分享
- 结合源码谈谈 RunLoop 的应用场景(持续更新中)
- Python方法总结(1)——删除pandas DataFrame的某一/几列
- CF 803 F. Coprime Subsequences(数论题,莫比乌斯,容斥原理)
- Node自学中踩过的一些坑
- 快速排序
- JS插件Fancytree使用分享及源码分析
- 在线考试题库型App
- Shell脚本基础2-变量和备注
- Java大数据处理(BigInteger)
- 1.11编程基础之二分查找 04:网线主管
- RxBus进阶------基于RxJava2.x实现以注解的方式传递消息
- MYSQL常用 存储引擎简述
- 【unity3d学习笔记】unity中创建全局变量
- codeforces——230A——Dragons