bootstrap获取表格中选中行的值_bootstrap table getSelections获取选中行数据的方法

bootstrap table getSelections获取选中行数据的方法

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

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

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

前端分页getSelections

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

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

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

alert(JSON.stringify(rows));

// rows对象的格式

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

服务器端分页getSelections

服务器端分页如果需要同时获取多给分页选中的行数据，需要先设置保持状态属性。//首先，设置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('getSelections');

完整代码

Bootstrap Table getSelections例子

.table-demo {

width: 80%;

margin: 30px auto 0px auto;

}

获取选中项目

// 设置需要显示的列

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('getSelections');

alert(JSON.stringify(rows));

}