bootstrap获取表格中选中行的值_bootstrap table getAllSelections获取所有选中行数据的方法...

bootstrap table getAllSelections获取所有选中行数据的方法

getAllSelections 是一个bootstrap table一个经常用到的方法，该方法获取获取你所有选中行的数据，需要注意和getSelections方法的区别，getSelections不会返回包含搜索刷选后的选中的数据。

方法返回的对象格式如下：[{"Id":1,"ProductName":"香蕉","StockNum":"100","checked":true},

{"Id":3,"ProductName":"车厘子","StockNum":"2010","checked":true}]

getAllSelections用法

如果使用的是前端分页模式，无效把属性maintainSelected设置为ture,getSelections也可以同时获取多页选中的数据。//获取所有选中行的数据

var rows = $('#table').bootstrapTable('getAllSelections ');

//rows选中行的数据对象数组

alert(JSON.stringify(rows));

// rows对象的格式

// [{"Id":1,"ProductName":"香蕉","StockNum":"100","checked":true},{"Id":3,"ProductName":"车厘子","StockNum":"2010","checked":true}]

服务器端分页getAllSelections

服务器端分页如果需要同时获取多给分页选中的行数据，需要先设置保持状态属性。//首先，设置maintainSelected :true开启保持分页状态

$('#table').bootstrapTable({

url: '/package/bootstrap-table-1.14.1/data.json',

pagination: true,

search: true,

columns: columns,

pageSize:2,

maintainSelected :true,

toolbar:"#toolbar"

});

//获取选中的数据

var rows = $('#table').bootstrapTable('getAllSelections ');

完整代码

Bootstrap Table getAllSelections 例子

.table-demo {

width: 80%;

margin: 30px auto 0px auto;

}

获取所有选中项目

测试流程，先随便选中第1行，任何搜索框输入200再选中这行，点击按钮看结果

// 设置需要显示的列

var columns = [{

field :"checked",

title: '编号',

checkbox:true

}, {

field: 'ProductName',

title: '名称'

}, {

field: 'StockNum',

title: '库存'

}];

$('#table').bootstrapTable({

url: '/package/bootstrap-table-1.14.1/data.json',

pagination: true,//开启分页

search: true, //开启刷选

columns: columns,

pageSize:2,

maintainSelected :true,

toolbar:"#toolbar"

});

function getSels()

{

var rows = $('#table').bootstrapTable('getAllSelections');

alert(JSON.stringify(rows));

}