BootStrap table動態增刪改表格內數據

1:添加一個【操作】列

 

{
    title: "操作",
    align: 'center',
    valign: 'middle',
    width: 160, // 定義列的寬度，單位為像素px
    formatter: function (value, row, index) {   //傳入數據
        return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.id + '\')">刪除</button>';
    }
}
2:創建刪除方法

    function del(id) {
        //yzh
//    debugger;
        var index = $('#table').bootstrapTable('getData').length;
        $('#table').bootstrapTable('remove', {
            field: "id",   //此處的 “id”對應的是字段名
            values: [parseInt(id)]
        });
    }

簡單使用：

1、在當前表格的最后新增數據

var _data = {
"name" : name,
        ...//some datas
"desc" : desc    }
$("#table_Id").bootstrapTable('append', _data);//_data----->新增的數據

2、在當前表格的首行新增數據

var _data = {
"name" : name,
        ...//some datas
"desc" : desc
    }
$("#table_Id").bootstrapTable('prepend', _data);//_data----->新增的數據

3、根據id刪除行

var ids = [];//定義一個數組
ids.push(id);//將要刪除的id存入數組
$("#table_Id").bootstrapTable('remove', {field: 'id', values: ids});//field:根據field的值來判斷要刪除的行 values：刪除行所對應的值

4、刪除所有數據

$("#table_Id").bootstrapTable('removeAll');
5、更新指定行的數據

var _data = {
"name" : name,   
        ...//some datas
"desc" : desc
    }
$('#table_Id').bootstrapTable('updateRow', {index: index, row: _data});//index---->更新行的索引。row---->要更新的數據

6、更新指定的列數據

var rows = {
index : index, //更新列所在行的索引
field : "status", //要更新列的field
value : "正常" //要更新列的數據
}//更新表格數據 
$('#table_Id').bootstrapTable("updateCell",rows);

7、重新加載數據（分頁的時候要注意參數的傳遞）

var opt = {
url: "abc.htm", //重新請求的鏈接
silent: true,
..... //可以加一些請求的參數
};
//重新加載數據
$("#table_Id").bootstrapTable('refresh',opt);