分類樹顯示 · TP5常用代碼

[TOC] ## 知識點 > 1、左側顯示分類樹，右側顯示對應欄目的內容（插件jsTree的用法） 2、默認全部分類展開 3、單擊展開或折疊分類 4、點擊分類，只刷新右側（右側框架） ## 難點 > 難點：單擊分類菜單，全部顯示或者隱藏官網：https://www.jstree.com/ ## 擴展知識 > 1、Atom保存自動格式化插件：atom-beautify 2、Javascript的console.log()用法 ## 插件jsTree的用法 ### 一、點擊左側分類，右側顯示分類相關的內容 #### 1、html（index.html） ~~~ <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col-sm-3"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>分類</h5> </div> <div class="ibox-content"> <div id="jstree"> <ul> <li class="jstree-open">全部展開、折疊 <ul> {volist name="categoryList" id="vo"} <li class="jstree-open">{$vo.catname} <ul> {volist name="vo.son" id="voson"} <li data-jstree='{"type":"html"}'> <a href="{:url('content',['id'=>$voson.id])}">{$voson.catname}</a> </li> {/volist} </ul> </li> {/volist} </ul> </li> </ul> </div> </div> </div> </div> <div class="col-sm-9"> <iframe id="iframe_content" src="{:url('content')}" style="width:100%; height:100%" frameborder="0" scrolling="atuo"></iframe> </div> </div> </div> ~~~ #### 2、js ~~~ <script> $(document).ready(function() { $("#jstree") .on('changed.jstree', function(e, data) { var url = $('#' + data.node.id).children('a').attr('href'); if (url != '#') { $('#iframe_content').attr('src', url); } }) .on('select_node.jstree', function(e, data) { if (data.node.id == 'j1_1') { if (data.instance.is_open(data.instance.get_next_dom(data.node))) { var i, j; for (i = 0, j = data.node.children.length; i < j; i++) { data.instance.close_node(data.node.children[i]); } } else { data.instance.open_all(data.node); } } else { data.instance.toggle_node(data.node); } }) .jstree({ "core": { "check_callback": true, "dblclick_toggle": false }, "plugins": ["types", "dnd"], "types": { "default": { "icon": "fa fa-folder" }, "html": { "icon": "fa fa-file-code-o" }, "svg": { "icon": "fa fa-file-picture-o" }, "css": { "icon": "fa fa-file-code-o" }, "img": { "icon": "fa fa-file-image-o" }, "js": { "icon": "fa fa-file-text-o" } } }); }); </script> ~~~ #### 3、php ~~~ <?php namespace app\admin\controller; use think\Controller; use think\Db; use app\admin\model\Menu; class Content extends Controller{ public function index() { //獲取分類樹 $categoryArray = Db::name('category')->order('listorder')->select(); $categoryList = Menu::tree($categoryArray); $this->assign('categoryList',$categoryList); return view(); } public function content($id = 1) { $this->assign('id',$id); return view(); } } ~~~ #### 4、html（content.html） ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H+ 后臺主題UI框架 - 樹形視圖</title> <meta name="keywords" content="H+后臺主題,后臺bootstrap框架,會員中心主題,后臺HTML,響應式后臺"> <meta name="description" content="H+是一個完全響應式，基于Bootstrap3最新版本開發的扁平化主題，她采用了主流的左右兩欄式布局，使用了Html5+CSS3等現代技術"> <link rel="shortcut icon" href="favicon.ico"> <link href="__ADMIN__/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> <link href="__ADMIN__/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> <link href="__ADMIN__/css/animate.min.css" rel="stylesheet"> <link href="__ADMIN__/css/style.min862f.css?v=4.1.0" rel="stylesheet"> </head> <body class="gray-bg"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>分類</h5> </div> <div class="ibox-content"> {$id} </div> </div> <script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script> <script src="__ADMIN__/js/bootstrap.min.js?v=3.3.6"></script> <script src="__ADMIN__/js/content.min.js?v=1.0.0"></script> </body> </html> ~~~ ### 二、默認全部分類展開 ~~~ <div id="jstree"> <ul> <li class="jstree-open">全部展開、折疊 <ul> {volist name="categoryList" id="vo"} <li class="jstree-open">{$vo.catname} <ul> {volist name="vo.son" id="voson"} <li data-jstree='{"type":"html"}'> <a href="{:url('content',['id'=>$voson.id])}">{$voson.catname}</a> </li> {/volist} </ul> </li> {/volist} </ul> </li> </ul> </div> ~~~ ### 三、單擊展開或折疊分類 #### 1、修改屬性 ~~~ .jstree({ "core": { "check_callback": true, "dblclick_toggle": false //雙擊屬性，默認為true（true為雙擊；false為單擊） }, "plugins": ["types", "dnd"], "types": { "default": { "icon": "fa fa-folder" }, "html": { "icon": "fa fa-file-code-o" }, "svg": { "icon": "fa fa-file-picture-o" }, "css": { "icon": "fa fa-file-code-o" }, "img": { "icon": "fa fa-file-image-o" }, "js": { "icon": "fa fa-file-text-o" } } }); ~~~ #### 2、修改事件 ~~~ $(document).ready(function() { $("#jstree") .on('changed.jstree', function(e, data) { // 改變事件，點擊左側分類，右側顯示相關內容 var url = $('#' + data.node.id).children('a').attr('href'); if (url != '#') { $('#iframe_content').attr('src', url); } }) .on('select_node.jstree', function(e, data) { // 單擊事件，單擊分類，全部展開，或者折疊 if (data.node.id == 'j1_1') { // is_open() 判斷當前節點是否展開 if (data.instance.is_open(data.instance.get_next_dom(data.node))) { var i, j; for (i = 0, j = data.node.children.length; i < j; i++) { data.instance.close_node(data.node.children[i]); // 函數close_node() 循環折疊二級分類 } } else { data.instance.open_all(data.node); } } else {// 函數toggle_node() 展開則折疊，折疊則展開 data.instance.toggle_node(data.node); } }) }); ~~~ ### 四、點擊分類，只刷新右側（右側框架） ~~~ <div class="col-sm-9"> <iframe id="iframe_content" src="{:url('content')}" style="width:100%; height:100%" frameborder="0" scrolling="atuo"></iframe> </div> ~~~ ## console.log()詳解最常用的方法就是Console.log(),就是在控制臺輸出內容。對于JavaScript程序的調試，相比于alert()，使用console.log()是一種更好的方式，原因在于：alert()函數會阻斷JavaScript程序的執行，從而造成副作用； alert彈出框需要點擊確認比較麻煩，而console.log()僅在控制臺中打印相關信息，因此不會造成類似的顧慮。最重要的是alert只能輸出字符串，不能輸出對象里面的結構 console.log()可以接受任何字符串、數字和JavaScript對象，可以看到清楚的對象屬性結構，在ajax返回json數組對象時調試很方便。 > 參考網址 JavaScript調試技巧之console.log()詳解 https://www.cnblogs.com/zdz8207/p/JavaScript-debug-consolelog.html Javascript調試命令——你只會Console.log()？ https://segmentfault.com/a/1190000012957199