概述：
在做權限需要使用jsTree,順便學習翻譯部分一下jsTree，jsTree是jquery插件，它提供可以互動的樹形結構。在MIT許可下，它具有完全免費的，開源和分布式的特點，jsTree也是很容易進行擴充，主題化和配置化。它支援HTML和JSON資料源和Ajax加載。
jsTree的函數恰當應用的盒模型（内容盒和邊緣盒），它可以作為一個AMD（異步子產品加載機制）子產品。它已經被内置到手機主題的響應式設計中，它也很容易進行自定義。它使用的JQuery的事件系統。在樹形中為衆多事件綁定回調是非常随便和容易的。
1. 下載下傳 jsTree 或使用 CNDJS線上加載
如果你選擇下載下傳的話-所有你需要的檔案都在你下載下傳的dist/檔案夾下
2.引入一個jsTree 主題
主題本身将會自動加載，但是最好的實踐就是将相關的css檔案引入。
如果你本地下載下傳的，根據具體路徑引用：
<link rel="stylesheet" href="dist/themes/default/style.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
如果你使用CDNJS線上加載方法：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" target="_blank" rel="external nofollow" />
3.建構一個容器
這個容器将會用來裝你設定的樹。一個<div>标簽就足夠了，這個例子中有一個内部<ul>無序清單标簽，沒有其他資料源配置（例如JSON）
<div id="jstree_demo_div"></div>
4.引入JQuery
jsTree要求Jquery1.9.0及以上的版本，你可以使用CND版或者是本地下載下傳的Jquery
例如CND版
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
5.引用jsTree
如果你已經下載下傳到你本地：對于是生産環境采用壓縮版：dist/jstree.min.js,對于開發調試采用原版：dist/jstree.js
<script src="dist/jstree.min.js"></script>
如果是CDNJS：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
6. 建立一個執行個體
一旦網頁的DOM結構加載完畢之後，你就可以執行個體化jstree執行個體
$(function () { $('#jstree_demo_div').jstree(); });
7.監聽事件
jsTree 使用事件實作使用者和樹清單進行互動。對于tree綁定事件最簡單就是點選事件，API文檔提供一系列事件詳細說明：點選打開連結
$('#jstree_demo_div').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
8.與你建立的執行個體進行互動
一旦執行個體化之後，它就可以進行調用方法，詳情的方法API：https://www.jstree.com/api/#/?q=(
三種選中的方法：
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
9.完整的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree test</title>
<!-- 2 load the theme CSS file -->
<link rel="stylesheet" href="dist/themes/default/style.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</head>
<body>
<!-- 3 setup a container element -->
<div id="jstree">
<!-- in this example the tree is populated from inline HTML -->
<ul>
<li>Root node 1
<ul>
<li id="child_node_1">Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Root node 2</li>
</ul>
</div>
<button>demo button</button>
<!-- 4 include the jQuery library -->
<script src="dist/libs/jquery.js"></script>
<!-- 5 include the minified jstree source -->
<script src="dist/jstree.min.js"></script>
<script>
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
</body>
</html>
效果如下：
![傳統的seq2seq模型與seq2seq with attention的模型原理細節解析[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)