基于BootStrap,FortAweSome，Ajax的学生管理系统
一. 基于BootStrap,FortAweSome，Ajax的学生管理系统代码部分
1.students.html
<1>html页面文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/plugin/font-awesome/css/font-awesome.css">
<style>
.icon {
margin: 0 15px;
}
</style>
</head>
<body>
<div style="padding: 20px 0; text-align: center;color: #2aabd2" ><h3>学生管理</h3></div> <div class="container" style="width: 800px">
<div><button class="btn btn-info" id='bntAdd' style="margin-bottom: 20px;">添加学生</button></div>
<div>
<table class="table-bordered table-hover table table-striped">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody id="student_tb">
{% for row in student_list %}
<tr nid="{{ row.id }}">
<td na="nid">{{ row.id }}</td>
<td na="StudentName">{{ row.StudentName }}</td>
<td na="age">{{ row.age }}</td>
{% if row.gender%}
<td na="gender">男</td>
{% else %}
<td na="gender">女</td>
{% endif %}
<td na="class_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</td>
<td>
<a href="javascript:void(0)" class="glyphicon glyphicon-remove icon deleteRow" style="font-size: 18px" ></a>
<a href="javascript:void(0)" class="fa fa-pencil-square-o icon editRow" style="font-size: 20px"></a>
</td> </tr>
{% endfor %}
</tbody> </table>
</div>
</div> <div class="modal fade" id="addModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4 class="modal-title" id="myModalLabel">添加学生信息 </h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="studentname" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="StudentName" placeholder="StudentName">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="age" placeholder="age">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" value="1" checked >男
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="0">女
</label>
</div>
</div>
<div class="form-group">
<label for="class" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="class_id">
{% for item in class_list %}
<option value={{ item.id }}>{{ item.title }}</option>
{% endfor %}
</select> </div>
</div> </form>
</div>
<div class="modal-footer">
<span id="errorMsg" style="color: red;"></span>
<button type="button" class="btn btn-default" data-dismiss="modal">取消 </button>
<button type="button" id="btnSave" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div> <div class="modal fade" id="delModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="alert alert-warning">
<div><input style="display: none" type="text" id="delNid" /></div>
<h3 style="text-align: center">是否删除学生信息？</h3>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消 </button>
<button type="button" id="btnConfirm" class="btn btn-danger">确定</button>
</div>
</div>
</div>
</div> <div class="modal fade" id="editModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4 class="modal-title" id="myModalLabel">修改学生信息 </h4>
</div>
<div><input style="display: none" type="text" id="editNid" name="nid" /></div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="studentname" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="StudentName" placeholder="StudentName">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="age" placeholder="age" >
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" value="1" checked >男
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="0">女
</label>
</div>
</div>
<div class="form-group">
<label for="class" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="class_id">
{% for item in class_list %}
<option value={{ item.id }}>{{ item.title }}</option>
{% endfor %}
</select> </div>
</div> </form>
</div>
<div class="modal-footer">
<span id="errorMsg" style="color: red;"></span>
<button type="button" class="btn btn-default" data-dismiss="modal">取消 </button>
<button type="button" id="saveEdit" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div> <script src="/static/jquery-3.1.1.js"></script>
<script src="/static/plugin/bootstrap/js/bootstrap.js"></script>
<script>
$(function () {
bindEdit();
saveEdit();
bindDel();
confirm_del();
bindEvent();
bindSave();
createRow();
});//加载完后自动执行上述函数,没有此步，jquery找到的标签绑定的事件和函数将失效
function bindEdit() {
$('#student_tb').on('click','.editRow',function () {
$('#editModel').modal('show');
$(this).parent().prevAll().each(function () {
var value=$(this).text();
var na=$(this).attr('na');
if(na=='class_id') {
var cid=$(this).attr('cid');
$('#editModel select[name=class_id]').val(cid);}
else if(na=='gender') {
if(value=='男') {$('#editModel :radio[value="1"] ').prop('checked',true);}
else {$('#editModel :radio[value="0"] ').prop('checked',true);}
}
//else if(na=='age') {$('#editModel input[name="age"]').val(value) ;}
//else if(na=='StudentName') {$('#editModel input[name="StudentName"]').val(value) ;}
//else{$('#editModel input[name="nid"]').val(value)}
else {$("#editModel input[name='"+ na+"']").val(value)}
console.log(na,value)
})
});
} function saveEdit() {
$('#saveEdit').click(function () {
var postData={};
$('#editModel').find('input,select').each(function () {
var name=$(this).attr('name');
var value=$(this).val();
if (name=='gender'){
if($(this).prop('checked')) {postData[name]=value}
}
else {postData[name]=value}
console.log(postData)
});
$.ajax({
url:'/edit_students',
type:'POST',
data:postData,
dataType:'JSON',//返回值要是JSON格式的
success:function (arg) {
console.log(arg);
if (arg.status){window.location.reload();}
else{alert(arg.message)}
}
})
})
} function bindDel() {
//遇到a标签绑定事件失败的测试，绑定的标签添加onclick="bindDel(this)"
//{#console.log(ths);
//{#$('#delModel').modal('show');
$('#student_tb').on('click','.deleteRow',function () {
$('#delModel').modal('show');
var rowId=$(this).parent().parent().attr('nid');
$('#delNid').val(rowId);//为选定标签设置值
});
}
function confirm_del() {
$('#btnConfirm').click(function () {
var delID= $('#delNid').val();
console.log(delID);
$.ajax({
url:'/del_students',
type:'GET',
data: {'nid': delID},//ajax传过去的必须是字典
success:function (arg) {
var dict=JSON.parse(arg);
if (dict.status){ $('tr[nid="'+ delID+'"]').remove();}
$('#delModel').modal('hide')}
})
})
}
function bindEvent() {
$('#bntAdd').click(function () {$('#addModal_1').modal('show')//手动打开模态框
});
}
function bindSave() {
$('#btnSave').click(function () {
var postData = {};
$('#addModal_1').find('input,select').each(function () {
console.log(this);//方便调试使用
var value = $(this).val();
var name = $(this).attr('name');
if (name=='gender') {
if ($(this).prop('checked')) {
postData[name] = value;
}
}
else {postData[name] = value;}
});
console.log(postData);
$.ajax({
url: '/add_students',
type: 'POST',
data: postData,
success: function (arg) {
var dict = JSON.parse(arg);
console.log(arg);
if(dict.status){
{#window.location.reload();#}
createRow(postData,dict.data);
$('#addModal_1').modal('hide')
}else {$('#errorMsg').text(dict.message);}
}
})
});
}
function createRow(postData,nid) {
var tr = document.createElement('tr');
$(tr).attr('nid',nid);
var trId = document.createElement('td');
trId.innerHTML = nid;
$(tr).append(trId);
var trStudentName = document.createElement('td');
trStudentName.innerHTML = postData.StudentName;
$(tr).append(trStudentName);
var trAge = document.createElement('td');
trAge.innerHTML = postData.age;
$(tr).append(trAge);
var trGender = document.createElement('td');
if (postData.gender == '0') {
trGender.innerHTML = '女';
}
else {
trGender.innerHTML = '男';
}
$(tr).append(trGender);
var trClass = document.createElement('td');
text = $('select[name="class_id"]').find('option[value="' + postData.class_id + '"]').text();
trClass.innerHTML = text;
$(tr).append(trClass);
$('#student_tb').append(tr);
var troperation = document.createElement('td');
troperation.innerHTML = '<a href="javascript:void(0)" class="glyphicon glyphicon-remove icon deleteRow" style="font-size: 18px"></a>\n' +
'<a href="javascript:void(0)" class="fa fa-pencil-square-o icon editRow" style="font-size: 20px"></a>';
$(tr).append(troperation);
} </script>
</body>
</html>
<2>学生管理页面
<3>添加学生模态框
2.students_ajax.py
# -*- coding:utf-8 -*-
from django.shortcuts import render,HttpResponse
from django.shortcuts import redirect
from student_manage.models import *
import json
def get_students(request):
class_list=classes.objects.all()
student_list = student.objects.all()
return render(request, 'students.html', {'student_list':student_list, 'class_list': class_list})
def add_students(request):
response = {'status': True, 'message': None,'data':None}
print(request.POST)
try:
Name = request.POST.get('StudentName')
age = request.POST.get('age')
gender = request.POST.get('gender')
class_id = request.POST.get('class_id')
print(Name, age, gender, class_id)
obj=student.objects.create(StudentName=Name, age=age, gender=gender, cs_id=class_id)
response['data']=obj.id
except Exception as e:
response['status']=False
response['message']='用户输入错误'
result = json.dumps(response, ensure_ascii=False)
print(result)
return HttpResponse(result)
def del_students(request):
response = {'status': True}
print(request.GET)
try:
nid=request.GET.get('nid')
print(nid)
student.objects.filter(id=nid).delete()
except Exception as e:
response['status']=False
print(response)
#ajax参数arg只能接受字符串，故传到前段arg的参数要先转化为字符串
return HttpResponse(json.dumps(response))
def edit_students(request):
response = {'status': True, 'message': None}
try:
nid=request.POST.get('nid')
Name = request.POST.get('StudentName')
age = request.POST.get('age')
gender = request.POST.get('gender')
class_id = request.POST.get('class_id')
print(nid,Name, age, gender, class_id)
student.objects.filter(id=nid).update(StudentName=Name,age=age,gender=gender,cs_id=class_id)
except Exception as e:
response['status']=False
response['message']='用户输入错误'
result = json.dumps(response, ensure_ascii=False)
return HttpResponse(result)
3.summerize
<1>序列化
Python序列化
字符串 = json.dumps(对象) 对象->字符串
对象 = json.loads(字符串) 字符串->对象
JavaScript:
字符串 = JSON.stringify(对象) 对象->字符串
对象 = JSON.parse(字符串) 字符串->对象
应用场景：
数据传输时，
发送：字符串
接收：字符串 -> 对象
<2>ajax基础知识
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
success:function(arg){
// arg是字符串类型
// var obj = JSON.parse(arg)
}
})
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
<3>发送数据时data中的value
a. 只是字符串或数字
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
b. 包含数组
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':[1,2,3,4]},
dataType: 'JSON',
traditional: true,
success:function(arg){
// arg是对象
}
}) c. data内仍含有字典
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1': JSON.stringify({}) },
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
<4>事件委托
$('要绑定标签的上级标签').on('click','要绑定的标签',function(){})
$('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})
<5>打开新页面的两种方式
a.新URL方式：
- 独立的页面
- 数据量大或条目多
b. 对话框方式：
- 数据量小或条目少
-增加，编辑
- Ajax: 考虑，当前页；td中自定义属性
- 页面（直接刷新，或用ajax做，但代码量大）
- 独立的页面
- 数据量大或条目多
b. 对话框方式：
- 数据量小或条目少
-增加，编辑
- Ajax: 考虑，当前页；td中自定义属性
- 页面（直接刷新，或用ajax做，但代码量大）
基于BootStrap,FortAweSome，Ajax的学生管理系统的更多相关文章
- 基于bootstrap + php +ajax datatable 插件的使用
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 下面是我学习datatables写的一个服务器端(php)分页例子,该功能包含的功能 ...
- daterangepicker+ bootstrap +php +ajax +datatable双日历的使用
在练习基于bootstrap datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel& ...
- 放出一批学生管理系统jsp源码，部分有框架
基于jsp+struts 2的学生管理系统eclipse - 源码码头 https://www.icodedock.com/article/25.html 基于jsp+mysql的JSP学生成绩管 ...
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- jsp学习之基于mvc学生管理系统的编写
mvc开发模式:分别是 model层 view层 Control层 在学生管理系统中,model层有学生实体类,数据访问的dao层,view层主要是用于显示信息的界面,Control层主要是servl ...
- 基于bootstrap的后台管理系统
ace metro'nic 基于bootstrap的后台admin system ace [eis], 扑克牌中的A 表示 非常棒, 杰出, 顶好的... gallery: 画廊, 走廊; 在网页中常 ...
- Summernote – 基于 Bootstrap 的文本编辑器
Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 AP ...
- 学生管理系统（SSM简易版）总结
之前用 Servlet + JSP 实现了一个简易版的学生管理系统,在学习了 SSM 框架之后,我们来对之前写过的项目重构一下! 技术准备 为了完成这个项目,需要掌握如下技术: Java 基础知识 前 ...
- 饮冰三年-人工智能-Python-26 Django 学生管理系统
背景:创建一个简单的学生管理系统,熟悉增删改查操作 一:创建一个Django项目(http://www.cnblogs.com/wupeiqi/articles/6216618.html) 1:创建实 ...
随机推荐
- GetBulkRequest PDU的应用
http://blog.csdn.net/wenph2008/article/details/16821617
- Linux去重命令uniq（转）
注意:需要先排序sort才能使用去重. Linux uniq命令用于检查及删除文本文件中重复出现的行列. uniq可检查文本文件中重复出现的行列. 语法 uniq [-cdu][-f<栏位> ...
- 自己定义控件三部曲之动画篇(七)——ObjectAnimator基本使用
前言: 假如生活欺骗了你, 不要悲伤,不要心急! 忧郁的日子里须要镇静: 相信吧,快乐的日子终将会来临! 心儿永远向往着未来: 如今却常是忧郁. 一切都是瞬息,一切都将会过去: 而那过去了的,就会成为 ...
- Dozer--第三方复制工具,哎哟,还不错!
Dozer简单点说,就是拷贝工具,也是复制工具的意思,官方的解释是:Dozer is a Java Bean to Java Bean mapper that recursively copies d ...
- JS禁用微信复制链接、禁用转发
$(function () { function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); } if (typeof Weixi ...
- 【cl】Unable to find executable for: taskkill
十二月 02, 2015 5:16:56 下午 org.openqa.selenium.os.ProcessUtils killWinProcess警告: Process refused to die ...
- 单片机project师必备的知识
C语言编程 程序编译过程 哪部分干什么 数据结构 链表 二叉树 算法 数组 堆栈 队列算法 遍历 常量在内存中的表现形式 语法和内存的相应关系 数电 UML 类图 时序图 状态图 用例图 ...
- POJ3463 Sightseeing
题目大意:求两点间最短路与长度为最短路长度+1的路径的条数之和. 方法1:最短路径+DP 首先求出ST间最短路径,然后根据递归式记忆化搜索(因此还要构造反向图). 我们知道到达终点的路径长度最长为ma ...
- [SPOJ 30669] Ada and Trip
[题目链接] https://www.spoj.com/problems/ADATRIP/ [算法] 直接使用dijkstra堆优化算法即可 [代码] #include<bits/stdc++. ...
- encodeURIComponent编码java后台解码出现乱码问题
问题:JavaScript请求后台带着name参数,有中文进行编码:url?name=" + encodeURIComponent(name):java后台直接使用name或者name=ja ...