西游之路——python全栈——编辑学生信息
一、基本操作流程
指定样式 —>显示框 —>获取当前行的数据 —>将数据复制到指定位置
二、py文件操作
def edit_student(request):
response = {'code': 1000, 'message': None}
try:
nid = request.GET.get('nid')
n = request.GET.get('user')
a = request.GET.get('age')
g = request.GET.get('gender')
c = request.GET.get('cls_id')
models.Students.objects.filter(id=nid).update(
name=n,
age=a,
gender=g,
cs_id=c
)
except Exception as e:
response['code'] = 1001
response['message'] = str(e)
return HttpResponse(json.dumps(response))
三、HTML操作
1、自定义属性,用于实现默认值
<tr nid="{{row.id}}">
<td na="nid">{{row.id}}</td>
<td na="user">{{row.name}}</td>
<td na="age">{{row.age}}</td>
<td na="gender">{{row.gender}}</td>
<td na="cls_id" cid="{{row.cs_id}}">{{row.cs.name}}</td>
2、绑定、默认值和保存刷新操作
//绑定编辑保存事件
function bindEditConfirm() {
$('#btnEditSave').click(function() {
/*获取表单所有信息方式
1、使用each循环
2、var data = $('#form表单的ID').serialize() (优化推荐)
data存为字典类型,可直接调用
*/
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;
}
});
console.log(postData);
$.ajax({
url: '/edit_student.html',
type: 'GET',
data: postData,
dataType: 'JSON',
success: function(arg) {
if(arg.code == 1000) {
window.location.reload();
}else{
alert(arg.message);
}
}
});
});
}
//绑定编辑按钮点击事件
function bindEdit() {
$('#tb').on('click','.edit-row',function() {
//显示框
$('#editModal').modal('show');
//获取当前行的所以数据
$(this).parent().prevAll().each(function() {
//获取v,v为文本值
//获取自定义na属性,用于判断和定位查找,以便赋v值
var v = $(this).text();
var n = $(this).attr('na');
if(n == 'cls_id') {
var cid = $(this).attr('cid');
$('#editModal select[name="cls_id"]').val(cid);
}else if(n == 'gender'){
//v=True
if(v == 'True') {
$('#editModal :radio[value="1"]').prop('checked',true);
}else {
$('#editModal :radio[value="0"]').prop('checked',true);
}
}else{
$('#editModal input[name="'+ n +'"]').val(v);
}
});
});
}
总结:
新URL方式
— 独立的页面
— 数据量大或条目多
对话框方式
— 增加和编辑
— Ajax:考虑,当前页,td中的自定义属性
删除:对话框
发送数据时:
data中的v
a、只有字符串跟数字
$.ajax({
url: 'http://baidu,com',
type: 'POST',
data: {k:v},
dataType: 'JSON',
success: function(arg) {
// arg是对象
}
})
a、列表或元祖时
$.ajax({
url: 'http://baidu,com',
type: 'POST',
data: {k: v},
dataType: 'JSON',
traditional: true,
success: function(arg) {
// arg是对象
}
})
a、穿字典
$.ajax({
url: 'http://baidu,com',
type: 'POST',
data: {k: JSON.stringify({k1:v1, k2:v2})},
dataType: 'JSON',
success: function(arg) {
// arg是对象
}
})