<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
</head>
<body>
<div class="container">
<div style="padding: 20px 0;">
<a class="btn btn-primary" id="addBtn">添加</a>
<a class="btn btn-danger">删除</a>
</div>
{#添加模块#}
<div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
{% for row in stu_list %}
<tr nid="{{ row.id }}">
<td na="nid">{{ forloop.counter }}</td>
<td na="user">{{ row.username }}</td>
<td na="age">{{ row.age }}</td>
<td na="gender">{{ row.gender }}</td>
<td na="cls_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</td>
<td>
<a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="modal fade" id="addModal" 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">创建学生</h4>
</div>
<div class="modal-body">
<form id="fm" class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" placeholder="姓名">
</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="年龄">
</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="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="0"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cls_id">
{% for row in cls_list %}
<option value="{{ row.id }}">{{ row.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" class="btn btn-primary" id="btnSave">保存</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="alert alert-danger" role="alert">
<h3>删除学生信息？</h3>
<div>...<input style="display: none;" type="text" id="delNid" /></div>
<div>
<button type="button" class="btn btn-default">取消</button>
<button id="delConfirm" type="button" class="btn btn-danger">确定</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="eidtModal" 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">编辑学生</h4>
</div>
<div class="modal-body">
<form id="fm" class="form-horizontal">
<input type="text" name="nid" style="display: none" />
<div class="form-group">
<label for="username" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="user" placeholder="姓名">
</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="年龄">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="0"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cls_id">
{% for row in cls_list %}
<option value="{{ row.id }}">{{ row.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" class="btn btn-primary" id="btnEditSave">保存</button>
</div>
</div>
</div>
</div>
</div>
<script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>
$(function () {
{#显示添加模态框#}
bindEvent();
{#添加保存#}
bindSave();
{#弹出是否删除对话框#}
bindDel();
bindDelConfirm();
bindEdit();
})
{#点击添加按钮展示对话框 #}
function bindEvent() {
$('#addBtn').click(
function () {
$('#addModal').modal('show');
}
)
};
{#读取添加框中的所有选项，保存#}
function bindSave() {
$('#btnSave').click(
function () {
{#创建一个保存全部内容的字典#}
var postData ={}
$('#addModal').find('input,select').each(function () {
var v = $(this).val();
var n = $(this).attr('name');
{# 针对性别 #}
if(n=='gender'){
if($(this).prop('checked')){
postData[n] = v;
};
{# 注意 #}
}else {
postData[n] = v;
}
});
$.ajax({
url:'/add_studnet.html',
type:'POST',
{#上面的字典直接拿下来匹配#}
data:postData,
dataType:'JSON',
success:function (arg) {
{#构造一个假的展示列#}
{# 后台返回一个数据库总条数arg.count #}
if (arg.status){
createRow(postData,arg.count,arg.iid)
$('#addModal').modal('hide');
}else {
{#错误信息 #}
}
}
})
}
)
};
{# 添加时创建 #}
function createRow(postData,nid,iid) {
var tr = document.createElement('tr')
$(tr).attr('nid',iid);
{# 构造一个假id列 #}
var tdID = document.createElement('td')
tdID.innerHTML = nid
$(tr).append(tdID)
var tdUser = document.createElement('td')
tdUser.innerText = postData.username
$(tr).append(tdUser)
var tdAge = document.createElement('td');
tdAge.innerHTML = postData.age;
$(tr).append(tdAge);
var tdSex = document.createElement('td')
{# 判断性别 #}
if(postData.gender){
tdSex.innerHTML = '男'
}else {
tdSex.innerHTML = '女'
};
$(tr).append(tdSex);
{#获取select思路，先找到select标签，在获取他的value #}
var tdCls = $('select[name="cls_id"]').find('option[value="'+postData.cls_id+'"]').text()
tdCls.innerHTML = tdCls;
$(tr).append(tdCls);
var tdHandle = '<td> <a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a> </td>';
$(tr).append(tdHandle);
{#在把整个tb放到 tr中#}
$('#tb').append(tr);
};
{# 删除 #}
function bindDel() {
$('#tb').on('click','.del-row',function () {
$('#delModal').modal('show');
//回去当前的ID
var rowId = $(this).parent().parent().attr('nid');
$('#delNid').val(rowId);
})
}
function bindDelConfirm() {
$('#delConfirm').click(function () {
var rowId = $('#delNid').val();
console.log(rowId);
$.ajax({
url: '/del_student/',
type: 'GET',
data: {'nid': rowId},
success:function (arg) {
var dict = JSON.parse(arg);
if(dict.status){
$('tr[nid="'+ rowId+'"]').remove();
}
$('#delModal').modal('hide');
}
})
});
}
{# 编辑 #}
function bindEdit() {
$('#tb').on('click','.edit-row',function () {
$('#eidtModal').modal('show');
//1.获取当前行的所有数据
// 将数据赋值到对应的对话框的指定位置
$(this).parent().prevAll().each(function () {
// cls_id
var v = $(this).text();
var n = $(this).attr('na');
if(n=='cls_id'){
var cid = $(this).attr('cid');
$('#eidtModal select[name="cls_id"]').val(cid);
}else if(n=='gender'){
// v=True
if(v=='True'){
$('#eidtModal :radio[value="1"]').prop('checked',true);
}else{
$('#eidtModal :radio[value="0"]').prop('checked',true);
}
}else {
// n=age
// v=12
$("#eidtModal input[name='"+ n +"']").val(v)
}
});
})
}
</script>
</body>
</html>
var data = $('form表单的ID').serialize();
$.ajax({
data: $('form表单的ID').serialize();
})
网友评论