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

2023-05-31 18:36| 来源: 网络整理| 查看: 265

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 //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);

【本文地址】

公司简介

联系我们