在 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"]});
}

 

后台具体代码就忽略了...