BootStrapTable单选及取值的实现⽅法
学习bootstrapTable ⼀直没有到单选框的选定的和取值的教程，今天写⼀个.作为笔记
1. 效果图: 点击 bootstrapTable 单选的按钮, 选中该列, 取到该列的所有值.
2. js 代码 : bootstrapTable 初始化
a. 注意:
singleSelect : true, // 单选checkbox
columns : [ { checkbox: true } ] // bootstrapTable 显⽰单选checkbox 列
$().ready(function() {
// bootstrapTable 表格数据初始化
var table = $('#item_info_table').bootstrapTable({
url      : '<c:url value='/item/entry/main_info/list_data'/>',
method    : 'POST',          // GET
uniqueId    : 'id',          // 绑定ID
toolbar    : '#item_info_toolbar',  // 搜索框绑定
search    : true,          // 搜索框
pagination  : true,          // 显⽰页码等信息
singleSelect  : true,          // 单选checkbox
showRefresh  : true,          // 显⽰刷新按钮
showColumns  : true,          // 选择显⽰的列
pageSize    : pageSize,        // 当前分页值
pageList    : pageList,        // 分页选页
dataType    : dataType,        // JSON
sidePagination : sidePagination,      // 服务端请求
buttonsAlign  : buttonsAlign,      // 刷新，显⽰列按钮位置
toolbarAlign  : toolbarAlign,      // 搜索框位置
columns    : [
{
checkbox: true
}, {
title  : '项⽬序号',
field  : 'itemNum',
align  : 'center',
formatter:function(value,row,index){
var url = '';
if (isSingleItem(value)) url = '<a href="#" mce_href="#" onclick="single_item_edit_fun(\'' + row.infoId + '\')">' + row.itemNum + '</a>  ';
if (isJoinItem(value))  url = '<a href="#" mce_href="#" onclick="join_item_edit_fun(\'' + row.infoId + '\')">' + row.itemNum + '</a>  ';
return url;
}
}, {
title  : '项⽬名称',
field  : 'itemName',
align  : 'center'
}
]
});
/********** bootstrapTable toolbar 按钮事件 *********/
// [新增] 按钮点击事件
$('#item_info_btn_add').click(function(){
$('#item_info_modal').modal('show');
});
// [项⽬⽴项] 按钮点击事件bootstrap项目
$('#item_info_btn_do').click(function(){
var selectContent = table.bootstrapTable('getSelections')[0];
if(typeof(selectContent) == 'undefined') {
toastr.warning('请选择⼀列数据!');
return false;
}else{
console.info(selectContent);
$('#item_project_modal').modal('show');  // 项⽬⽴项⾯板
}
});
});
3. bootstrapTable url : '<c:url value='/item/entry/main_info/list_data'/>'，后台json数据
注意. 第⼀个图⽚中的 chrome F12 中的 Object 就是selectContent =table.bootstrapTable('getSelections')[0] 中的数据了这
样我们就能取到 bootstrap 单选框选择⼀⾏的数据.
{
"offset":10,
"rows":
[
{
"infoId":"main_info_1111",
"itemName":"AAA项⽬组",
"itemNum":"JXY160909011S"
},
{
"infoId":"main_info_2222",
"itemName":"BBB项⽬组",
"itemNum":"JXY160909012F"
}
],
"total":10
}
以上所述是⼩编给⼤家介绍的BootStrapTable 单选及取值的实现⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。