bootstrapTable使用小结

项目中使用bootstrapTable展示表格，记录开发过程中遇到的问题，以便查询；
参考官网：https://examples.bootstrap-table.com/#methods/append.html

自定义加载数据，原有的数据会被删除

$table.bootstrapTable('load', data)

插入一条行数据

$table.bootstrapTable('insertRow', {index: 0, row: {
	id: randomId,
	name: 'Item ' + randomId,
	price: '$' + randomId
}})

获取表格数据

$table.bootstrapTable('getData')

获取选中的数据

$table.bootstrapTable('getSelections')

删除数据

var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
	return row.id
})
$table.bootstrapTable('remove', {
	field: 'id',
	values: ids
})

父页面打开子页面（弹窗）

layer.open({
  type: 2, 
  content: 'add.html' //可以是同级目录的页面
}); 

子页面（弹窗）传值到父页面

let row = $("#test").bootstrapTable('getSelections');//获得选中的行数据
window.parent.doCallback(row);//doCallback(row)是在父页面定义的方法，可以处理得到的row数据

//关闭弹窗
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

js传递List数据到后端

let array = [];
let user1 = {"id": 1, "name": "huage"};
let user2 = {"id": 2, "name": "heihei"};
array.push(user1);
array.push(user2);
let data = {"userList": array};

$.ajax({
  type: 'post',
  url: url,
  data: JSON.stringify(data),
  dataType: 'json',
  contentType: 'application/json',
  success: function(result){
    
  }
})

//后端处理
public Result handler(@RequestBody InfoVo vo){
  
}

public class InfoVo{
  private List<User> userList;//跟js的data中参数名称对应
}