padding: 0px 20px;
font-size: 15px;
}
#delNid {
font-size: large;
}
#nothing {
color: #0f0f0f;
}
ID姓名年龄性别班级操作
{% for row in stu_list %}{{ row.id }}{{ row.username }}{{ row.age }}{% if row.gender %}男
{% else %}
女
{% endif %}
{{ row.cs.titile }} {% endfor %}确认删除学生信息
确定
取消
bindEvent();
bindSave();
bindDel();
bindDelConfirm();
bindQuit();
bindEdit();
bindEditConfirm();
});//编辑学生信息确认
function bindEditConfirm() {
$('#btnEditSave').click(function () {var postData ={};
$('#editModal').find('input,select').each(function () {
console.log($(this)[0]);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:'/edit_student.html/',
type:'POST',
data:postData,
success:function (arg) {var n =JSON.parse(arg)if(n.status){
window.location.reload()
}else{
alert(n.error)
}
}
})
})
}//编辑学生信息显示
function bindEdit() {
$('#tb').on('click','.edit-row',function () {
$('#editModal').modal('show');//显示后需要获取当前行的所有数据//此时点击标签的父集之前的所有数据,可以通过prevAll()获取
$(this).parent().prevAll().each(function () {var v = $(this).text();var n = $(this).attr('na');
console.log(n)if (n=='cs_id'){var cid = $(this).attr('cid');
$('#editModal select[name="cs_id"]').val(cid);
console.log("设置班级")
}else if(n=='gender'){var gid = $(this).attr('gid');
console.log('设置性别',gid)if(gid=='True'){
$('#editModal :radio[value="1"]').prop('checked',true);
console.log('是个男的')
}else{
$('#editModal :radio[value="0"]').prop('checked',true);
}
}else{
$("#editModal input[name='"+ n +"']").val(v)
}
})
})
}
function bindQuit() {
$('#quitDel').click(function () {
$('#delModal').modal('hide')
})
}
function bindDelConfirm() {
$('#delConfirm').click(function () {var rowId = $('#delNid').val();
console.log(rowId)
$.ajax({
url:'/del_student.html',
type:'GET',
data: {'nid': rowId},
success: function (arg) {var dict =JSON.parse(arg);if(dict.status) {
$('tr[nid="' + rowId + '"]').remove();
$('#delModal').modal('hide');
}
}
})
})
}
function bindDel() {
$('#tb').on('click','.del-row',function () {//此时因为弹窗跳出,弹窗内无法获得需要删除学生信息的id//所以在表格的tr标签内设置自定义变量 nid = {{ row.id }}//从而方便本次弹窗跳出事件后获得对应的id信息
var rowId = $(this).parent().parent().attr('nid');var rowName = $(this).parent().parent().attr('n_name');
console.log(rowId)
$('#delNid').val(rowId);
$('#delNid').text(rowName);
$('#delModal').modal('show');
})
}
function bindEvent() {
$('#addBtn').click(function () {
$('#addModal').modal('show');
})
}
function bindSave() {
$('#btnSave').click(function () {var postData = {};//关于postData,当点击“保存”按钮之后,//postData就成为{'username':'二百五','age':18,'gender':1,'cs_id':2}//类似以上这样的一个字典,而表格中的id等于后台返回的JSON.parse(arg).data
$('#addModal').find('input,select').each(function () {
console.log($(this)[0]);var v = $(this).val();var n = $(this).attr('name');if (n == 'gender') {if ($(this).prop('checked')) {
postData[n]=v;
}
}else{
postData[n]=v;
}
})
console.log(postData)
$.ajax({
url:'/add_student.html',
type:'POST',
data: postData,
success: function (arg) {
console.log(arg);var dict =JSON.parse(arg);if(dict.status) {//window.location.reload() 此时不利用刷新来实现添加成功,避免流量和计算的浪费
createRow(postData, dict.data);
$('#addModal').modal('hide');
}else{
$('#errorMessage').text(dict.message)
}
}
})
})
}
function createRow(postData, nid) {var tr = document.createElement('tr');
$(tr).attr('nid',nid);
$(tr).attr('n_name',postData.username);var tdId = document.createElement('td');
tdId.innerHTML=nid;
$(tr).append(tdId);var tdUsername = document.createElement('td');
tdUsername.innerHTML=postData.username;
$(tr).append(tdUsername);var tdAge = document.createElement('td');
tdAge.innerHTML=postData.age;
$(tr).append(tdAge);var tdGender = document.createElement('td');if (postData.gender == '0') {
tdGender.innerHTML= '女';
}else{
tdGender.innerHTML= '男';
}
$(tr).append(tdGender);var tdClass = document.createElement('td');var textClass = $('select[name="cs_id"]').find('option[value="' + postData.cs_id + '"]').text();
tdClass.innerHTML=textClass
$(tr).append(tdClass)var tdHandle = '
删除' +'编辑
'$(tr).append(tdHandle)$('#tb').append(tr)
console.log($(tr).attr('nid'))
console.log($(tr).attr('n_name'))
}