<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>部门</title>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<style>
#dept td, #dept th {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3>部门信息</h3>
<hr>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8 column">
<table id="dept" class="table table-striped table-hover">
<thead>
<tr>
<th>部门编号</th>
<th>部门名称</th>
<th>部门所在地</th>
<th>是否优秀</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for dept in dept_list %}
<tr>
<td>{{ dept.no }}</td>
<td>
<!-- 写代码时要尽量避免使用硬编码(hard code) -->
<a href="{% url 'empsindept' dept.no %}">{{ dept.name }}</a>
</td>
<td>{{ dept.location }}</td>
<td>
{% if dept.excellent %}
<span style="color: green;">√</span>
{% else %}
<span style="color: red;">×</span>
{% endif %}
</td>
<td>
<a id="{{ dept.no }}" href="javascript:void(0);" class="btn btn-xs btn-warning">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="col-md-4 column">
</div>
</div>
</div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script>
$(function() {
$('#dept tbody tr:even').addClass('info');
$('#dept tbody tr:odd').addClass('warning');
$('#dept a[id]').on('click', function(evt) {
var a = $(evt.target);
if (confirm('确定要删除吗?')) {
$.getJSON('/hrs/deldept/' + a.attr('id'), function(json) {
if (json.code == 200) {
a.parent().parent().remove();
$('#dept tbody tr:even').addClass('info');
$('#dept tbody tr:odd').addClass('warning');
}
});
}
});
});
</script>
</body>
</html>