一、通过弹窗保存数据时

• $('#fm').find('input,select').each(function (){})通过查里面包含的特定标签来循环

• $(this).val()获取value

• $(this).attr('属性')获取特定标签的属性

• $('select[name="cs_id"]')这种拼接定位方法

• 委托事件$('#table_tb').on('click','#Idremove',function ()给一个大的框架绑定里面细节的委托事件

image.png

• 添加的思路

<form id="fm" class="form-horizontal">
<form>

• 整体都在form中，可以通过循环找到里面的标签，利用字典将他们封装起来，这里注意checkbox，要判断的是被选中的，封装起来

 $('#btnSave').click(function () {
            var postData={}
            $('#fm').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处理,这里也可以直接用.serialize()不用循环

function bindSave() {
        $('#btnSave').click(function () {
            var postData={}
            $('#fm').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;
                }
            });
            console.log(postData)
            $.ajax({
                url:'/add_students/',
                type:'POST',
                data:postData,
                dataType:"JSON",
                success:function(arg){
                    if(arg.stutus){
                      createRow(postData,arg.data)
                    }else{
                        $("#errorMsg").text(arg.message)
                    }
                }
            })
        });     
    }

• 注意这里用了个 createRow(postData,arg.data)是为了在添加的时候，不用刷新页面，造成页面已经添加的假象

    function createRow (postData,nid) {
        var tr = document.createElement('tr')
        $(tr).attr('nid',nid)
        var tdID = document.createElement('td')
        tdID.innerHTML = nid
        
        $(tr).append(tdID);

        var tdName = document.createElement('td')
        tdName.innerHTML = postData.name
        $(tr).append(tdName);

        var tdgender = document.createElement('td')
        if(postData.gender == "1"){
             console.log(postData.gender)
            tdgender.innerHTML ="男"
        }else{
            tdgender.innerHTML ="女"
        }
        $(tr).append(tdgender);

        var tdage = document.createElement('td')
        tdage.innerHTML = postData.age
        $(tr).append(tdage);

        var tdcls = document.createElement('td')
        tdcls.innerHTML = $('select[name="cs_id"]').find('option[value="'+postData.cs_id+'"]').text()
        $(tr).append(tdcls)

        $("#table_tb").append(tr)
    }

• 删除的思路

• 点击删除时触发，一个弹窗，用来删除，给那些虚构的添加行，做委托事件

弹窗，绑定委托事件的弹窗

    function bindDel() {
        $('#table_tb').on('click','#Idremove',function () {
            $('#delModal').modal('show');
            var rowID = $(this).parent().parent().attr('nid');
            $('#delNid').val(rowID);

        })
    }

触发删除

    function  bindDelConfirm() {
        $('#delConfirm').click(function () {
             var rowId = $('#delNid').val();
             $.ajax({
                 url: '/del_student/',
                 type: 'GET',
                 data: {'nid': rowId},
                 dataType:'JSON',
                 success:function (arg) {
                     if(arg.status){
                          $('tr[nid="'+ rowId+'"]').remove();
                          $('#delModal').modal('hide');

                     }
                 }

             })
        })
    }

• 触发编辑$(this).parent().prevAll()获取同级属性，在页面上自定义属性

 {# 编辑 #}
    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)


                }
             });


        })