BootStraptable动态增删改表格内数据

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 '删除';12 }13 }

14 2:创建删除⽅法15

16 function del(id) {17 //yzh18 // 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 datas4 \"desc\" : desc }

5 $(\"#table_Id\").bootstrapTable('append', _data);//_data----->新增的数据

2、在当前表格的⾸⾏新增数据

1 var _data = {2 \"name\" : name,

3 ...//some datas4 \"desc\" : desc5 }

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\要更新列的fieldvalue : \"正常\" //要更新列的数据}//更新表格数据

$('#table_Id').bootstrapTable(\"updateCell\

7、重新加载数据（分页的时候要注意参数的传递）

var opt = {

url: \"abc.htm\重新请求的链接silent: true,

..... //可以加⼀些请求的参数};

//重新加载数据

$(\"#table_Id\").bootstrapTable('refresh',opt);