## 思路
一:循环得到数据
二:加载 `jquery` , `treeTable`插件 相关,并初始化
## 代码
```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--中间内容/start-->
<table class="table table-hover table-bordered table-list" id="menus-table">
<thead>
<tr>
<th width="80">排序</th>
<th width="50">ID</th>
<th>菜单名称</th>
<th>操作</th>
<th width="80">状态</th>
<th width="180">操作</th>
</tr>
</thead>
<tbody>
{$category}
</tbody>
</table>
<!--中间内容/end-->
<!--js/start-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--tree/start-->
<script src="http://www.ijquery.cn/js/treeTable/treeTable.js"></script>
<link href="http://www.ijquery.cn/js/treeTable/treeTable.css" rel="stylesheet">
<!--tree/end-->
<script>
$(function() {
$("#menus-table").treeTable({
expandable: true
});
})
</script>
<!--js/end-->
</body>
</html>
```
## 说明
如果用 `thinkcmf` 的封装内容的话,需要这样加载!
```
<script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>
<script src="__STATIC__/js/wind.js"></script>
<script>
$(document).ready(function() {
Wind.css('treeTable');
Wind.use('treeTable', function() {
$("#menus-table").treeTable({
indent : 20
});
});
});
</script>
```
- 附录
- 逻辑与数据模型
- HTML约定-bootstrap
- HTML约定-LayUI
- 角色管理 role
- 数据表
- 列表
- 控制器
- 视图
- 视图-layui
- 角色添加
- 控制器
- 视图
- 角色添加提交
- 控制器
- 验证
- 角色修改
- 控制器
- 视图
- 角色修改提交
- 控制器
- 角色删除
- 控制器
- 权限设置
- 控制器
- 视图
- 模型
- 权限设置提交
- 用户 user
- 数据表
- 列表
- 控制器
- 视图
- 模型
- 添加
- 控制器
- 视图
- 添加提交
- 控制器
- 验证器
- 编辑
- 控制器
- 视图
- 编辑提交
- 控制器
- 验证器
- 删除
- 停用启用
- 角色用户中间表role_user
- 菜单管理
- 数据表
- 表格折叠列表
- 控制器
- 视图
- 全部列表
- 控制器
- 视图
- 填加
- 控制器
- 视图
- 填加提交
- 控制器
- 验证器
- 编辑
- 控制器
- 视图
- 编辑提交
- 控制器
- 验证器
- 删除
- 控制器
- 视图
- 导入菜单
- 视图
- 控制器
- 特别注意
- annotation
- 导出菜单
- 视图
- 控制器
- 排序
- 控制器
- 视图
- 模型