西游之路——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是对象
            }
            })