[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
- Layer无刷新不跳转弹框提示信息
- 整合ThinkPHP+实用代码
- TP整合Layer插件实现无刷新
- 自定义助手函数
- 添加信息失败后不跳转
- 三种无限级分类
- TP常用代码
- 自定义公共函数
- TP模型管理专题
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之删除模型
- TP模型管理之编辑模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段删除
- TP模型管理之字段编辑
- TP模型管理之预览模型
- TP模型管理之公共函数
- layer_hplus.js_修订一
- TP模型管理之预览模型静态页
- 后台内容管理系统
- 分类树显示
- 内容列表显示
- 信息发布
- 编辑信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 简单调用
- 路径问题
- 跨域多图上传
- 跨域单图上传
- UEditor图片跨域上传解决方案
- 定制工具栏图标
- ajaxFileUpload
- LayUI
- 图片上传
- layui分页
- 搜索页
- 搜索优化及删除
- Uploadify
- TP5前端应用
- 静态首页
- 前台首页功能实现
- 自定义标签库
- 前台模板继承应用
- 首页自定义标签改进
- 文章内容页
- 自定义标签改进
- 自定义标签修正
- 图片等比例自动缩放
- 后台权限管理
- 角色管理
- 规则管理
- 权限设置
- 会员管理
- 权限管理
- 前台登录注册功能
- 注册登录
- 阿里大于手机注册
- 阿里大于升级阿里云短信服务
- 自动登录完成
- PHP异位或加密实现自动登陆
- 微信开发
- 分享接口
- 静态页面实现微信分享
- 动态页微信分享
- 页面静态化
- 1-全站静态化前期配置
- 2-链接地址静态化
- TP5常用片段代码
- 加载静态资源路径与常量
- thinkphp5预定义常量
- 删除某文件夹的内容
- 解压插件包
- 异步提交插件
- 其他功能
- 背景音乐
- 手机访问PC网站自动跳转到手机网站代码
- 手机微信音乐MP3播放器
- 后盾之网页背景音乐
- 播放器宽度自适应
- 前台首页数据调用
- 视频列表
- 搜索分页
- H5解决苹果（IOS）不能自动播放音乐
- 清空缓存
- 文件处理常识
- 删除路径下的所有文件夹和文件
- 一键清空缓存
- 评论留言
- 格式化时间
- 替换微博内容的URL地址@用户与表情
- PHP正则理解
- jQuery评论插件
- TP空操作
- TP路由
- 跨域访问
- 设置请其头允许跨域请求
- 模板前台判断手机访问跳转手机网址代码
- PHP遍历一个文件夹下所有文件和子文件夹
- PHP获取视频的第一帧与时长
- TP5数据库
- 链式操作原理
- update替换字段部分内容
- 后台开发
- 后台登录页居中显示
- TP5自带验证码
- JS & JQuery专题
- 二级城市联动菜单
- 模板引擎
- 混合模板编译
- 黄永成TP微博开发
- 消息推送
- memcache安装
- 插件开发
- 插件介绍
- 插件钩子
- 浅谈初步理解钩子
- 插件钩子(hooks)分析
- 插件钩子简单理解
- 控制器调用插件
- 钩子通用处理函数
- 插件基类代码
- 插件测试代码
- 浅谈钩子与插件
- 技术综合
- 常用代码
- PHP
- 56个PHP开发常用代码片段（上）
- 56个PHP 开发常用代码片段（中）
- 56个PHP 开发常用代码片段（下）
- sublime text安装自动补全注释的插件
- 影音视频开发
- 视频
- H5视频直播扫盲
- 音乐
- 语音
- PHP实现语音播报功能
- MUI
- 窗体操作