Files
06-Note/Python-100-Days/Day41-55/oa/templates/dept.html
sherlockforrest bf2ed2e31f 更新
2023-06-20 09:22:53 +08:00

84 lines
2.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>