<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/jquery-3.3.1.js"></script>
<style>
.active {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="background-color: pink">
用户信息
<ul>
{% for user in user_list %}
<li><a href="?uid={{ user.pk }}">{{ user }}</a></li>
{% endfor %}
</ul>
</div>
<div class="col-md-3">
<form action="" method="post">
{% csrf_token %}
<button class="btn btn-success">保存</button>
<input type="hidden" name="postType" value="role">
<table class="table">
<thead>
<tr>
<th>角色</th>
<th>选择</th>
</tr>
</thead>
<tbody>
{% for role in roles %}
<tr {% if role.id|safe == rid %} class="active" {% endif %}>
<td><a href="?uid={{ uid }}&rid={{ role.id }}">{{ role }}</a></td>
{% if role.id in role_id_list %}
<td><input type="checkbox" name="role" value="{{ role.id }}" checked></td>
{% else %}
<td><input type="checkbox" name="role" value="{{ role.id }}"></td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</form>
</div>
<div class="col-md-6">
<form action="" method="post">
{% csrf_token %}
<input type="hidden" name="postType" value="permission">
{% if rid %}
<button class="btn btn-success">保存</button>
{% endif %}
<table class="table" id="body">
<tbody></tbody>
</table>
</form>
</div>
</div>
</div>
</body>
<script>
$.ajax({
url:'/permissions_tree/',
method:'get',
success:function (res) {
$.each(res,function (i,permission) {
console.log(i,permission);
var menu_title = permission['menu__title'];
var menu_pk = permission['menu__pk'];
var url = permission['url'];
var pid = permission['pid'];
var pk = permission['pk'];
var title = permission['title'];
if (menu_title){
if ($('#menu_'+menu_pk).length) {
var s = `
<tr id='per_${pk}'>
<td><input type='checkbox' name='permission_id' value='${pk}'>${title}</td>
</tr>
`;
$('#menu_'+menu_pk).parent().append(s)
}else {
var s = `<tr class='root' id='menu_${menu_pk}'><td>${menu_title}</td></tr>
<tr id='per_${pk}'>
<td><input type='checkbox' name='permission_id' value='${pk}'>${title}</td>
</tr>`;
$('#body').append(s);
}
}else {
var s = `<td><input type='checkbox' name='permission_id' value='${pk}'>${title}</td>`;
$('#per_'+pid).append(s);
}
});
var per_id_list ={{ per_id_list }};
$.each(per_id_list,function (i,j) {
$("#body [value='"+j+"']").prop('checked',true)
})
}
})
</script>
</html>