fancytree
fancytree是一款基於jq和jq-ui的樹形插件，相比普通的jsTree，fancytree擴展的功能很是的多，除了checkbox選中，拖拽排序等基礎的功能，還有節點過濾，即時編輯，tabletree(在列表中展現jstree)，各類鍵盤事件，以及各類皮膚樣式。
插件地址：https://github.com/mar10/fancytree
當前分享版本：2.22.5javascript
配置介紹
$("#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）css
fancytree使用經驗分享
1.插件的引入
傳統引入的話，就是經過’script/link’標籤去引入jq,jq-ui,和fancytree的js,css。或者使用一些lazyload去引入這些文件也是一樣的道理。
ES6模塊化引入的話，要麻煩一點，首先在目標文件引入jq,jq-ui,如java
import ‘jquery’
import ‘jquery-ui-bundle’;//注意這裏
import ‘../../../../plugins/fancytree/dist/jquery.fancytree-all’;node
要引入jquery-ui-bundle，即npm i jquery-ui-bundle;普通的jquery-ui引入後，不會報錯，可是會缺乏ui的相關方法，進而致使fancytree報錯，expose-loader我的嘗試也無論用，被這個坑了好久。jquery
2.若是是以ajax獲取數據資源，渲染tree，而且數據可變的情況下，須要對fancytree從新渲染，即：git
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.獲取選中節點數據github
let selectTree = $("#treetable").fancytree("getTree").rootNode.children;
在選中fancytree的某一個節點後，經過訪問rootNode屬性，能夠得到整個fancytree的source。
在經過遞歸，去遍歷source中的selected屬性，能夠篩選出本身想要的數據，這樣作是最簡單的，相反經過selected屬性也能夠選中checkbox。web
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;
}ajax
fancytree首先會檢測jq-ui是否有fancytree，避免重複聲明，由於fancytree的方法是掛在$.ui下面的，在fancytree源碼中npm
$.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等擴展），是一個很老的插件，我的以爲寫的仍是不錯的，有的地方若是能抽離出來就更好了，但願本身以後也能夠寫出這樣大而全的插件。
本文同步分享在 博客「j_bleach」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。