最近在開發(fā)中遇到要在頁面展示無限層級分類的需求，作為后端出身的我追他，要在jsp模板里面寫原生的樹形結(jié)構(gòu)還是有些吃力的坟募，于是網(wǎng)上找了一圈，發(fā)現(xiàn)jsTree這個(gè)插件的口碑不錯(cuò)邑狸，但在實(shí)際使用過程中還是遇到了一些小困難懈糯，記錄下來以便日后檢索
博客原文連接：http://onee.top/2017/03/jstree/
Github：https://github.com/VOREVER
個(gè)人主頁：https://wangyu.space/
基本使用
使用插件當(dāng)然要先引入插件，此插件也是依賴與jQuery的单雾，所以一定要先導(dǎo)入jQuery赚哗，版本要求1.9.0以上，我這里偷個(gè)懶硅堆，直接使用CDN來導(dǎo)入（也建議用CDN來導(dǎo)入屿储，因?yàn)榫€上環(huán)境CDN的加載速度比加載服務(wù)器文件要快。硬萍。）
<link rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
生成樹的方式有好幾種扩所，可以直接寫ul套li標(biāo)簽，插件會(huì)幫你生成好看的樹形樣式朴乖，還有一種就是通過JSON數(shù)據(jù)來生成祖屏，我這里用的就是通過AJAX請求數(shù)據(jù)來生成樹的，首先在HTML中建立一個(gè)空的節(jié)點(diǎn)买羞，取一個(gè)唯一的id袁勺，舉例如下：
<div id="treeDemo"></div>
之后就可以通過js來生成樹啦，先用jQuery獲取DOM對象畜普，接著調(diào)用jsTree的API來生成樹期丰，如下所示：
$('#treeDemo').jstree({
'core': {
'data': {
'id' : 'node_1',
'text' : 'Node'
}
}
});
最后生成的效果就是普普通通的文件樹，類似于文件夾目錄結(jié)構(gòu)吃挑，懶得截圖就不截了钝荡，自行腦補(bǔ)，這里要說一下的就是data這個(gè)參數(shù)都有哪些屬性可以來設(shè)置舶衬，官網(wǎng)的API介紹的不全埠通，我在瀏覽器檢查其里獲取了一下data對象，列入data參數(shù)的所有屬性
a_attr: Object // 生成一個(gè)a標(biāo)簽節(jié)點(diǎn)的屬性
li_attr: Object // 生成一個(gè)li標(biāo)簽節(jié)點(diǎn)的屬性
children: Array // 所有子節(jié)點(diǎn)數(shù)組
data: Object // 此節(jié)點(diǎn)的數(shù)據(jù)（沒傳過逛犹。端辱。）
icon: String // 此節(jié)點(diǎn)的圖標(biāo)（沒傳過。虽画。）
id: String // 節(jié)點(diǎn)唯一的id舞蔽，如果不傳會(huì)默認(rèn)生成
original: Object // 后臺傳過來的這個(gè)節(jié)點(diǎn)的所有數(shù)據(jù)
parent: String // 父節(jié)點(diǎn)的id
parents: Object // 所有的父節(jié)點(diǎn)數(shù)組
state: Object // 節(jié)點(diǎn)狀態(tài)，這里面有五個(gè)固定屬性码撰，可以傳默認(rèn)值
// 分別是“checked”渗柿、“disabled”、“l(fā)oaded”脖岛、“opened”做祝、“selected”砾省，均為布爾值
text: String // 節(jié)點(diǎn)顯示的文本
type: String // 節(jié)點(diǎn)的類型，我只用過默認(rèn)“default”
當(dāng)然生成樹除了data參數(shù)混槐，還有很多別的參數(shù)可以設(shè)置编兄，以下寫一些我用過的，更詳細(xì)請查閱官方API文檔
$('#treeDemo').jstree({
// 引入插件
'plugins': ['checkbox','types','themes','contextmenu'],
'types': {
'default': {
'icon': false // 刪除默認(rèn)圖標(biāo)
},
},
'checkbox': { // 去除checkbox插件的默認(rèn)效果
'tie_selection': false,
'keep_selected_style': false,
'whole_node': false
},
'core': {
'multiple' : true, // 可否多選
'data' : nodeData, // 生成節(jié)點(diǎn)的數(shù)據(jù)声登，nodeData是后臺返回的JSON數(shù)據(jù)
'dblclick_toggle': true //允許tree的雙擊展開
}狠鸳，
'contextmenu': { // 右鍵菜單
'items': {
'edit': {
'label': '編輯',
'action': function (data) {}
},
'delete': {
'label': '刪除'
'action': function (data) {}
}
}
}
});
遇到的坑
基本的用法就在這里，用起來基本上還是比較順利的悯嗓，下面來說說不太順利的件舵，比如如何去刷新一個(gè)樹，或者說換個(gè)數(shù)據(jù)脯厨，如何重新生成铅祸，API里面有刷新的函數(shù)用法如下：
$('#treeDemo').jstree(true).refresh();
如果用了你就會(huì)發(fā)現(xiàn)，除了把頁面上所有節(jié)點(diǎn)的選中狀態(tài)都去掉了合武，其他的并沒有用临梗，就算更換了數(shù)據(jù)源，也并不會(huì)生成一棵新的樹稼跳，達(dá)不到我想要的效果盟庞，解決辦法就是...不要去刷新它，直接銷毀掉汤善，然后再重新生成什猖，辦法比較土，但我目前沒找到更好的辦法红淡，銷毀樹的方法如下：
$('#treeDemo').jstree("destroy");
接下來再說另一個(gè)坑不狮，通過右鍵菜單，我想實(shí)現(xiàn)刪除某個(gè)節(jié)點(diǎn)的功能在旱，通過實(shí)現(xiàn)右鍵的監(jiān)聽事件摇零，在API文檔中找到了刪除節(jié)點(diǎn)的函數(shù)delete_node (obj)，返回一個(gè)布爾值颈渊，按理說傳一個(gè)節(jié)點(diǎn)對象進(jìn)去就可以了，可是不管是傳對象還是傳節(jié)點(diǎn)id终佛，打死就是不對俊嗽，一直返回false，獲取節(jié)點(diǎn)對象的方法如下：
var inst = jQuery.jstree.reference(data.reference)
var node = inst.get_node(data.reference);
看到文檔中說可以傳個(gè)節(jié)點(diǎn)id的數(shù)組來批量刪除節(jié)點(diǎn)铃彰，那好那就來試試吧
$('#treeDemo').jstree(true).delete_node([node.id]);
成功了??绍豁，什么鬼，我明明只要?jiǎng)h一個(gè)節(jié)點(diǎn)牙捉，非要讓我傳個(gè)數(shù)組竹揍。敬飒。。那接下來又有問題啦芬位，函數(shù)返回刪除成功了无拗，可頁面上的節(jié)點(diǎn)還在啊，這個(gè)問題著實(shí)困擾了我一天都沒有解決昧碉，于是在一個(gè)加班的頁面英染，無意中在官網(wǎng)首頁的一個(gè)子標(biāo)簽里看到一句話，大意是被饿，你要要編輯刪除節(jié)點(diǎn)的話四康，要設(shè)置core.check_callback的值為true，這么重要的東西為什么藏著這么隱蔽狭握。闪金。為什么不寫在API文檔里。论颅。哎垦。于是添加了這個(gè)屬性就好了，如下所示：
$('#treeDemo').jstree({
'core': {
'check_callback': true;
}
});
總結(jié)
jsTree這個(gè)插件還是很好用的嗅辣，遇到的問題先寫這么多撼泛，之后有的話再往里面補(bǔ)充，就這樣澡谭。愿题。。
