# 视图
## 代码
```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
</head>
<body>
<form class="js-ajax-form" action="{:url('rbac/authorizePost')}" method="post">
<div class="table_full">
<table class="table table-bordered" id="authrule-tree">
<tbody>
{$category}
</tbody>
</table>
</div>
<div class="form-actions">
<input type="hidden" name="roleId" value="{$roleId}"/>
<button class="btn btn-primary js-ajax-submit" type="submit">保存</button>
</div>
</form>
<script src="/static/js/treeTable/treeTable.js"></script>
<link rel="stylesheet" href="/static/js/treeTable/treeTable.css">
<script type="text/javascript">
//treeeTable初始化
$(function () {
$("#authrule-tree").treeTable({
indent: 20
});
})
//选择
function checknode(obj) {
var chk = $("input[type='checkbox']");
var count = chk.length;
var num = chk.index(obj);
var level_top = level_bottom = chk.eq(num).attr('level');
for (var i = num; i >= 0; i--) {
var le = chk.eq(i).attr('level');
if (le < level_top) {
chk.eq(i).prop("checked", true);
var level_top = level_top - 1;
}
}
for (var j = num + 1; j < count; j++) {
var le = chk.eq(j).attr('level');
if (chk.eq(num).prop("checked")) {
if (le > level_bottom) {
chk.eq(j).prop("checked", true);
}
else if (le == level_bottom) {
break;
}
} else {
if (le > level_bottom) {
chk.eq(j).prop("checked", false);
} else if (le == level_bottom) {
break;
}
}
}
}
</script>
</body>
</html>
```
而如果运用的是`thinkcmf`的wind.js话,加载CSS和JS,必须这样用
```
$(function () {
Wind.css('treeTable');
Wind.use('treeTable', function () {
$("#authrule-tree").treeTable({
indent: 20
});
});
});
```
- 附录
- 逻辑与数据模型
- HTML约定-bootstrap
- HTML约定-LayUI
- 角色管理 role
- 数据表
- 列表
- 控制器
- 视图
- 视图-layui
- 角色添加
- 控制器
- 视图
- 角色添加提交
- 控制器
- 验证
- 角色修改
- 控制器
- 视图
- 角色修改提交
- 控制器
- 角色删除
- 控制器
- 权限设置
- 控制器
- 视图
- 模型
- 权限设置提交
- 用户 user
- 数据表
- 列表
- 控制器
- 视图
- 模型
- 添加
- 控制器
- 视图
- 添加提交
- 控制器
- 验证器
- 编辑
- 控制器
- 视图
- 编辑提交
- 控制器
- 验证器
- 删除
- 停用启用
- 角色用户中间表role_user
- 菜单管理
- 数据表
- 表格折叠列表
- 控制器
- 视图
- 全部列表
- 控制器
- 视图
- 填加
- 控制器
- 视图
- 填加提交
- 控制器
- 验证器
- 编辑
- 控制器
- 视图
- 编辑提交
- 控制器
- 验证器
- 删除
- 控制器
- 视图
- 导入菜单
- 视图
- 控制器
- 特别注意
- annotation
- 导出菜单
- 视图
- 控制器
- 排序
- 控制器
- 视图
- 模型