jstree插件的使用(進階)——動態json數據創建樹
阿新 • • 發佈：2018-10-23
folder clas -c con file 文件 script 存儲 col 容器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- jstree css樣式 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> </head> <body><!-- 設置容器元素 --> <div id="jstree"></div> <!-- jquery.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <!-- jstree js核心文件 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <script type="text/javascript"> $(function(){ //當DOM準備好時創建一個jstree實例 $(‘#jstree‘).jstree({ //core 存儲核心的所有默認值 ‘core‘ : { //data 數據配置:在這裏可以傳遞HTML字符串或JSON數組 ‘data‘ : [ {‘id‘ : ‘ajson1‘, ‘parent‘ : ‘#‘,// # 根目錄 ‘icon‘ : ‘jstree-folder‘,//jstree-folder 文件夾圖標(默認圖標) ‘text‘:‘部門‘, "state" :{ "opened" : true //默認打開文件夾 } }, { ‘id‘: ‘ajson2‘, ‘parent‘ : ‘ajson1‘, ‘text‘:‘紀檢部‘ }, { ‘id‘: ‘ajson3‘, ‘parent‘ : ‘ajson1‘, ‘text‘:‘衛生部‘ }, { ‘id‘: ‘ajson4‘, ‘parent‘ : ‘ajson1‘, ‘text‘:‘公寓部‘ }, { ‘id‘: ‘ajson5‘, ‘parent‘ : ‘ajson1‘, ‘text‘:‘女生部‘ }, { ‘id‘: ‘ajson6‘, ‘parent‘ : ‘ajson2‘, ‘icon‘ : ‘jstree-file‘,//jstree-file 文件圖標 ‘text‘:‘張三‘ }, { ‘id‘: ‘ajson7‘, ‘parent‘ : ‘ajson2‘, ‘icon‘ : ‘jstree-file‘, ‘text‘:‘李四‘ }, { ‘id‘: ‘ajson8‘, ‘parent‘ : ‘ajson2‘, ‘icon‘ : ‘jstree-file‘, ‘text‘:‘王五‘ } ] } }); }); </script> </body> </html>
效果圖
jstree插件的使用(進階)——動態json數據創建樹