現在需要將省市縣區域這塊搞成樹狀圖的形狀，由於項目使用的AngularJS+ABP+WebAPI各個模塊之間數據傳輸形式是json格式，那么對於JsTree來說就方便很多了，只需要將json數據搞成我們JsTree需要的嵌套形式數據存儲就可以了。
JsTree官方地址
https://github.com/vakata/jstree#the-required-json-format
這里面有操作JsTree的全部內容，只需要將里面的小例子看懂，基本就沒問題。好的一點是那邊有人家的練習，理解起來很給力，只需要運行即可。
注意下：需要引用相關的js文件。這個在github中作者說的很清楚了，我們直接進行操作就可以了。
HTML頁面
需要指定的ID值，用來顯示我們Js文件中數據。
<div class="portlet-body">
<div id="areasTree"></div>
</div>
JS頁面
app.controller('AreasCtrl', function ($http, $scope, systemSetting) {
$http.get('api/areas/all').then(function (response) {
if (response.data) {
console.log(response.data);
$('#areasTree').jstree({
'core': {
'data': response.data, //返回的數據，數組
"themes": {
"dots": true, // no connecting dots between dots
"responsive": false //無響應
},
'multiple': false, //設置其為沒有多選
'check_callback': true, //設置其true.可以進行文本的修改。
},
'types': { //這里就是圖片的顯示格式
"default": {
"icon": "fa fa-folder tree-item-icon-color icon-lg"
},
"file": {
"icon": "fa fa-file tree-item-icon-color icon-lg"
}
},
'plugins': [ //插件，下面是插件的功能
'types', //可以設置其圖標，在上面的一樣。
'contextmenu', //文本菜單
'wholerow', //
'sort', //分類
'unique' //獨特----防止重復。(新添加的)
]
});
}
});
});
通過html的get方法我們可以從后台得到完整的json數據，如下：
接着我們就進行上面內容的講解。
‘core’:核心區域，里面主要是數據和主題。我們業務邏輯也是在這里進行的。里面一些功能都有注釋，可以自己看懂。
‘types’這里是 下面插件中的圖片的展示，是我們前面標簽的圖片。
‘plugins’是插件區域。這里可以自定義插件。文檔的下面就有例子。插件部分我們可以看到有以下幾個。
- types：設置圖標，對應於上面的那個。
- contextmenu：文本內容菜單，也就是說可以有右鍵的那些屬性，增刪改查。
- sort：分類。
- unique：防止重復。
- dnd：可以移動標簽。
這樣的特性還有很多，文檔中都有。這里需要注意到contextmenu和dnd，這兩個我們需要在core中設置其’check_callback’:true；這樣才能確保可以操作和移動標簽。
實現效果
下面是通過后台提供json數據，得到的樹狀圖樣式。
既然我們已經設置了contextmenu那么就意味着現在就有了右鍵功能，如下
那么如何才能響應這樣操作，比如我點擊新增，我是如何獲取這些數據，如何將其發送到后台呢。
實現右鍵操作的響應
我們界面上的東西出來了，那么如何才能實現響應了。我們發現在官方文檔中有下面的一句話。
"core.check_callback"can also be set to a function, that will be invoked every time a modification is about to happen (or when jstree needs to check if a modification is possible). If you returntruethe operation will be allowed, a value offalsemeans it will not be allowed. The possible operation you can expect arecreate_node,rename_node,delete_node,move_nodeandcopy_node. Themoreparameter will contain various information provided by the plugin that is invoking the check. For example the DND plugin will provide an object containing information about the move or copy operation that is being checked - is it a multi tree operation, which node is currently hovered, where the insert arrow is pointing - before, after or inside, etc.
其實大概的意思就是說我們可以通過這里的匿名函數來進行設置，看到底我們在前端選擇的是那個操作。
'check_callback': function (operation, node, parent, position, more) {
if (operation === 'create_node') {
console.log(parent.text);
console.log('create測試');
}
if (operation === 'delete_node') {
console.log(node.text);
console.log(position);
console.log('delete測試');
}
if (operation === 'rename_node') {
//console.log(parent.text);
console.log(position);
console.log(node.text);
console.log('rename測試');
}
console.log('測試區域');
return true;
},
通過在這里添加匿名函數，我們可以實現顯示一些操作。我們將雁塔修改為123看是否觸發了我們設置的匿名函數。
修改前：
修改后：
下面是打印了node節點的值，可以看到是一個對象。
通過上面的對比可以發現我們設置的匿名函數被成功的觸發了，可以發現這里的參數都有一些特殊的作用。分析下這個函數里面的參數operation,node,parent,position,more。
- operation：這個是看我們右鍵選擇了什么功能。是刪除，添加，移動，修改等。
- node：表示當前對象的值，里面保存有這個節點里面的一些屬性。
- parent：表示父類節點對象。
- position：表示當前節點的text值。比如我們上圖的123就是在后台打印了position的原因。
- more：這個現在打印不出來，也不清楚干什么用的。
我們現在已經知道了每個參數的區別，我們就可以利用operation來看到底選擇了哪些操作，接着就可以在相應的區域中進行post請求，不管是刪除還是添加都沒有問題。
我們就測試一個刪除吧。就拿我上面的來說就需要在選擇刪除的區域進行請求操作。
if (operation === 'delete_node') {
var url='api/areas/delete?id='+node.id;
$http.get(url)
.then(function(response){
console.log(response.state);
console.log('刪除成功');
});
console.log(node.text);
console.log(position);
console.log('delete測試');
}
這樣我們就可以和后台進行交互了。