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

}

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值