django建立管理系统之四----单页classes.html设计
下面具体设计chasses.html页面:
1.在classes.html的content block里面添加html:
{% block content %}
<div id="new_class"> <input type="button" value="新建班级"> </div>
<table border="1">
<thead>
<tr>
<td>班级ID</td>
<td>班级名称</td>
<td>操作</td>
</tr>
</thead>
<tbody>
{% for item in cls_list %}
<tr>
<td>{{ item.id }}</td>
<td>{{ item.caption }}</td>
<td><a class="td-edit">编辑</a> | <a class="td-delete">删除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
2.根据Model生成班级数据并书写views:
models.Classes.objects.create(caption="全栈一班")
撰写： handle_classes
def handle_classes(request):
current_user = request.session.get('username')
# models.Classes.objects.create(caption="全栈一班")
cls_list = models.Classes.objects.all()
return render(request, 'classes.html', {'username': current_user,'cls_list':cls_list})
--------------------------------------------班级增加模态对话框与cacel按钮功能--------------------------------------------------------------------
在classes.html table下面增加模态对话框:
<div class="model hide">
<form method="post" action="/classes.html" >
<input name="id" type="text" class="hide" />
<input name="caption" type="text" placeholder="确定" />
<input id="id_modal_cancel" type="button" value="提交"/>
<input type="submit" value="Submit"/>
<input type="button" id="modal_ajax_submit" value="Ajax方式提交"/>
</form>
</div>
<div class="shadow hide"></div>
<div class="remove hide">
<input id="id_remove_cancel" type="button" value="取消"/>
<input type="button" value="确定"/>
</div>
在base的css中增加对应css设置：
.model {
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-top: -250px;
margin-left: -250px;
z-index: 100;
background-color: white;
}
.shadow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
z-index: 99;
}
.hide{
display: none;
}
在class.html中增加js (注意观察bindAddEvent的调用方式和 写法):
$(function () {
$('#menu_classes').addClass('active');
bindAddEvent()
})
function bindAddEvent() {
$('#new_class').click(function () {
$('.modal,.shadow').removeClass('hide');
});
}
效果如图:
类似给取消绑定事件:
{% block js %}
<script>
$(function () {
$('#menu_classes').addClass('active');
bindAddEvent()
bindCancelEvent()
})
function bindAddEvent() {
$('#new_class').click(function () {
$('.model,.shadow').removeClass('hide');
SUBMIT_URL = "/classes.html";
});
}
function bindCancelEvent() {
$('#id_modal_cancel').click(function () {
$('.model,.shadow').addClass('hide');
});
}
</script>
{% endblock %}
1、Warning: $HADOOP_HOME is deprecated.
2、Android性能优化9-ANR完全解析
3、单线程程序处理消息的方式！
4、Python安装指南
5、JButton按钮