# Create your views here.
def menu_list(request):
result = []
query = Menu.objects.filter(is_delete=0)
if not query:
return None
if query:
for item in query:
data = {
'id': item.id,
'name': item.name,
'icon': item.icon,
'url': item.url,
'pid': item.pid,
'type': item.type,
'permission': item.permission,
'status': item.status,
'sort': item.sort,
'note': item.note,
'create_time': str(item.create_time.strftime('%Y-%m-%d %H:%M:%S')) if item.create_time else None,
'update_time': str(item.update_time.strftime('%Y-%m-%d %H:%M:%S')) if item.update_time else None,
}
result.append(data)
row_dict = json.dumps(result)
# print(row_dict)
form = MenuForm()
content = {
"result": row_dict,
"form": form
}
return render(request, "menu/index.html", content)
前端代码
{% extends 'public/layout.html' %}
{% load static %}
{% load my_tag %}
{% block css %}
<style>
.breadcrumb {
font-size: 20px;
background: #ffffff;
}
</style>
<link href="{% static 'css/bootstrap-table.min.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/jquery.treegrid.min.css' %}">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="card">
<div class="card-header">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" _msttexthash="2136498" _msthash="133">家</a></li>
<li class="breadcrumb-item active" _msttexthash="8592324" _msthash="134">仪表板 v1</li>
</ol>
</div>
<div class="card-toolbar clearfix">
<form class="pull-right search-bar" method="get" action="#!" role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="hidden" name="search_field" id="search-field" value="title">
<button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown"
type="button" aria-haspopup="true" aria-expanded="false">
标题 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="javascript:void(0)" data-field="title">菜单名称：</a></li>
</ul>
</div>
<input type="text" class="form-control" value="" name="keyword" placeholder="请输入名称">
</div>
</form>
<div class="toolbar-btn-action">
<a class="btn btn-primary m-r-5" href="#!" id="doAdd"><i class="mdi mdi-plus"></i> 新增</a>
<a class="btn btn-danger" href="#!" id="doDel"><i class="mdi mdi-window-close"></i> 删除</a>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="table">
</table>
</div>
<ul class="pagination">
<li class="disabled"><span>?</span></li>
<li class="active"><span>1</span></li>
<li><a href="#1">2</a></li>
<li><a href="#1">3</a></li>
<li><a href="#1">4</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--新增，编辑对话框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form id="formModel">
<div class="clearfix">
{% for field in form %}
<div class="form-group">
<label>{{ field.label }}:</label>
{{ field }}
<span class="error-msg" style="color: red"></span>
</div>
{% endfor %}
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript" src="{% static 'js/bootstrap-table.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap-table-treegrid.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.treegrid.min.js' %}"></script>
<script type="application/javascript">
var $table = $('#table');
{% comment %}var data = JSON.parse(
'[{"id":1,"pid":0,"status":1,"name":"用户管理","permissionValue":"open:user:manage"},' +
'{"id":2,"pid":0,"status":1,"name":"系统管理","permissionValue":"open:system:manage"},' +
'{"id":3,"pid":1,"status":1,"name":"新增用户","permissionValue":"open:user:add"},' +
'{"id":4,"pid":1,"status":1,"name":"修改用户","permissionValue":"open:user:edit"},' +
'{"id":5,"pid":1,"status":0,"name":"删除用户","permissionValue":"open:user:del"},' +
'{"id":6,"pid":2,"status":1,"name":"系统配置管理","permissionValue":"open:systemconfig:manage"},' +
'{"id":7,"pid":6,"status":1,"name":"新增配置","permissionValue":"open:systemconfig:add"},' +
'{"id":8,"pid":6,"status":1,"name":"修改配置","permissionValue":"open:systemconfig:edit"},' +
'{"id":9,"pid":6,"status":0,"name":"删除配置","permissionValue":"open:systemconfig:del"},' +
'{"id":10,"pid":2,"status":1,"name":"系统日志管理","permissionValue":"open:log:manage"},' +
'{"id":11,"pid":10,"status":1,"name":"新增日志","permissionValue":"open:log:add"},' +
'{"id":12,"pid":10,"status":1,"name":"修改日志","permissionValue":"open:log:edit"},' +
'{"id":13,"pid":10,"status":0,"name":"删除日志","permissionValue":"open:log:del"}]');{% endcomment %}
var data = JSON.parse('{{result|safe}}')
$(function () {
//控制台输出一下数据
//console.log(data);
//初始化表格
inittable();
});
//初始化表格
function inittable() {
$table.bootstrapTable({
data: data,
idField: 'id',
dataType: 'jsonp',
columns: [
{
field: 'check', checkbox: true, formatter: function (value, row, index) {
if (row.check == true) {
// console.log(row.serverName);
//设置选中
return {checked: true};
}
}
},
{field: 'id', title: '编号', sortable: true, align: 'center'},
{field: 'name', title: '名称'},
{field: 'icon', title: '图标', sortable: true, align: 'center', formatter: 'iconFormatter'},
{field: 'type', title: '类型', sortable: true, align: 'center', formatter: 'typeFormatter'},
{field: 'sort', title: '排序'},
{field: 'status', title: '状态', sortable: true, align: 'center', formatter: 'statusFormatter'},
{field: 'permission', title: '权限值'},
{
field: 'operate',
title: '操作',
align: 'center',
events: operateEvents,
formatter: 'operateFormatter'
},
],
// bootstrap-table-treegrid.js 插件配置 -- start
//在哪一列展开树形
treeShowField: 'name',
//指定父id列
parentIdField: 'pid',
onResetView: function (data) {
//console.log('load');
$table.treegrid({
initialState: 'collapsed',// 所有节点都折叠
// initialState: 'expanded',// 所有节点都展开，默认展开
treeColumn: 1,
// expanderExpandedClass: 'glyphicon glyphicon-minus', //图标样式
// expanderCollapsedClass: 'glyphicon glyphicon-plus',
onChange: function () {
$table.bootstrapTable('resetWidth');
}
});
//只展开树形的第一级节点
$table.treegrid('getRootNodes').treegrid('expand');
},
onCheck: function (row) {
var datas = $table.bootstrapTable('getData');
// 勾选子类
selectChilds(datas, row, "id", "pid", true);
// 勾选父类
selectParentChecked(datas, row, "id", "pid")
// 刷新数据
$table.bootstrapTable('load', datas);
},
onUncheck: function (row) {
var datas = $table.bootstrapTable('getData');
selectChilds(datas, row, "id", "pid", false);
$table.bootstrapTable('load', datas);
},
// bootstrap-table-treetreegrid.js 插件配置 -- end
});
}
// 格式化按钮
function operateFormatter(value, row, index) {
return [
'<button type="button" class="MenuOfadd btn-xs btn-default" style="margin-right:15px;"><i class="mdi mdi-plus" ></i> 新增</button>',
'<button type="button" class="MenuOfedit btn-xs btn-default" style="margin-right:15px;"><i class="mdi mdi-pencil" ></i> 修改</button>',
'<button type="button" class="MenuOfdelete btn-xs btn-default" style="margin-right:15px;"><i class="mdi mdi-window-close" ></i> 删除</button>'
].join('');
}
// 格式化类型
function typeFormatter(value, row, index) {
if (value === 'M') {
return '目录';
}
if (value === 'C') {
return '菜单';
}
if (value === 'F') {
return '按扭';
}
return '-';
}
function iconFormatter(value, row, index) {
console.log(value)
return '<i class="' + value + '"></i>'
}
// 格式化状态
function statusFormatter(value, row, index) {
if (value === 1) {
return '<span class="label label-success">正常</span>';
} else {
return '<span class="label label-default">锁定</span>';
}
}
//初始化操作按钮的方法
window.operateEvents = {
'click .MenuOfadd': function (e, value, row, index) {
add(row.id, row.name);
},
'click .MenuOfdelete': function (e, value, row, index) {
del(row.id);
},
'click .MenuOfedit': function (e, value, row, index) {
update(row.id);
}
};
/**
* 选中父项时，同时选中子项
* @param datas 所有的数据
* @param row 当前数据
* @param id id 字段名
* @param pid 父id字段名
*/
function selectChilds(datas, row, id, pid, checked) {
for (var i in datas) {
if (datas[i][pid] == row[id]) {
datas[i].check = checked;
selectChilds(datas, datas[i], id, pid, checked);
}
;
}
}
function selectParentChecked(datas, row, id, pid) {
for (var i in datas) {
if (datas[i][id] == row[pid]) {
datas[i].check = true;
selectParentChecked(datas, datas[i], id, pid);
}
;
}
}
function test() {
var selRows = $table.bootstrapTable("getSelections");
if (selRows.length == 0) {
alert("请至少选择一行");
return;
}
var postData = "";
$.each(selRows, function (i) {
postData += this.id;
if (i < selRows.length - 1) {
postData += "， ";
}
});
alert("你选中行的 id 为：" + postData);
}
function add(id, name) {
// alert("add 方法 , id = " + name);
//$('#myModal').modal('show');
//$('#myModalLabel').text("新增菜单")
window.location.href = "{% memory_url request 'menu_add' %}" + "?mid=" + id + "&name=" + name
}
function del(id) {
alert("del 方法 , id = " + id);
}
function update(id) {
alert("update 方法 , id = " + id);
}
</script>
{% endblock %}
效果
