BootStrap table动态增删改表格内数据

 1 1:添加一个【操作】列
 2 
 3  
 4 
 5 {
 6     title: "操作",
 7     align: 'center',
 8     valign: 'middle',
 9     width: 160, // 定义列的宽度，单位为像素px
10     formatter: function (value, row, index) {   //传入数据
11         return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.id + '\')">删除</button>';
12     }
13 }
14 2:创建删除方法
15 
16     function del(id) {
17         //yzh
18 //    debugger;
19         var index = $('#table').bootstrapTable('getData').length;
20         $('#table').bootstrapTable('remove', {
21             field: "id",   //此处的 “id”对应的是字段名
22             values: [parseInt(id)]
23         });
24     }

简单使用：

1、在当前表格的最后新增数据

1 var _data = {
2 "name" : name,
3         ...//some datas
4 "desc" : desc    }
5 $("#table_Id").bootstrapTable('append', _data);//_data----->新增的数据

2、在当前表格的首行新增数据

1 var _data = {
2 "name" : name,
3         ...//some datas
4 "desc" : desc
5     }
6 $("#table_Id").bootstrapTable('prepend', _data);//_data----->新增的数据

3、根据id删除行

1 var ids = [];//定义一个数组
2 ids.push(id);//将要删除的id存入数组
3 $("#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);