在 Bootstraptable 插件基礎上新增一行，保存，刪除的詳解

 

前台：@button(label:"新增",iconcss:"dm-add",onclick:"addRow")

 

// 刪除的數據
var deletedData = [];

新增一行數據，方法一：

/**
 * 新增一行數據
 */
function addRow(){
    var count = $('#table_add').bootstrapTable('getData').length;
    // newFlag == 1的數據為新規的數據
    $('#table_add').bootstrapTable('insertRow',{index:count,row:{newFlag:"1"}});
}

 注：index:count，其中count是新增行的位置，上就是在表格末尾處新增一行

方法二：（都一樣，多一種參考）

// 新增數據
var newcount = 0;

// 新增配置庫信息
function addConfigDataBase(){
    newcount = newcount + 1;
    $("#search-result").bootstrapTable('insertRow', {index:0, row:{configId:"",configName:""}}); //在表格的第一行新增
}

刪除一行:方法1：

/**
 * 刪除一行數據
 */
function deleteRow(row){
    var count = $('#table_add').bootstrapTable('getData').length;
    if (count == 1) {
        info("已經是最后一條，不能刪除!");
        return;
    }
    var newFlag = row.newFlag;
    if(newFlag == '1'){
        // 新規的數據直接刪除
        row.deleteFlag = "true";
        $('#table_add').bootstrapTable('remove',{field:"deleteFlag", values:["true"]});
        // 數據刪除后合計值區域自動重新計算
        autoCalculate();
    }else{
        row.deleteFlag = "true";
        $('#table_add').bootstrapTable('remove',{field:"deleteFlag", values:["true"]});
        // 刪除flag設置為刪除
        row['deletionFlag'] = '1';
        deletedData.push(row);
        // 數據刪除后合計值區域自動重新計算
        autoCalculate();
    }
}

/**
 * 保存
 */
function save(){
    $('#main-form').bootstrapValidator('validate');
    if($('#main-form').data('bootstrapValidator').isValid()){
        var detailList = $('#table_add').bootstrapTable('getData');
        var leaderValue = document.getElementsByName("leader");
        for(var i=0;i<detailList.length;i++) {
            detailList[i].leader = leaderValue[i].defaultValue;
        }//這段代碼是項目里的作用，這里無用
        // 數組合並（已刪除的表數據和當前頁面的數據）
        detailList = detailList.concat(deletedData);

        var assessId = getValue('#assessId');
        for (var i = 0; i < detailList.length; i++) {
            detailList[i]['assessId']=assessId;
        }

        var params=$("#main-form").serializeObject();
        params.detailList = detailList;
        ajax({
            url:'@url("/ims/appraisalManagement/save.action")',
            type:'POST',
            mask:true,
            data:JSON.stringify(params),
            contentType:"application/json",
            success:function(result){
                saveFileFordowntableForFileOfSon1(result.data);
                backsuccess("保存成功！",function(){
                    location.href='@url("/ims/appraisalManagement/init.action")';
                });
            }
        });
    }
}

 方法2（這里只對新增未保存的刪除）：

function removeConfigDataBase(row){
    newcount = newcount - 1;
    row.deleteFlag = "true";
    // 刪除選定的行
    $('#search-result').bootstrapTable('remove',{field:"deleteFlag", values:["true"]});
}

 

后台具體代碼就忽略了...