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="#" οnclick="single_item_edit_fun(\'' + row.infoId + '\')">' + row.itemNum + '</a>  ';                        if (isJoinItem(value))  url = '<a href="#" mce_href="#" οnclick="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');
});
// [项⽬⽴项] 按钮点击事件
$('#item_info_btn_do').click(function(){
var selectContent = table.bootstrapTable('getSelections')[0];
if(typeof(selectContent) == 'undefined') {
toastr.warning('请选择⼀列数据!');
return false;
}else{
console.info(selectContent);
bootstrap项目
$('#item_project_modal').modal('show');    // 项⽬⽴项⾯板
}
});
});
3. bootstrapTable url : '<c:url value='/item/entry/main_info/list_data'/>', 后台json数据
注意. 第⼀个图⽚中的 chrome F12 中的 Object 就是selectContent =table.bootstrapTable('getSelectio
ns')[0] 中的数据了 这样我们就能取到bootstrap 单选框 选择 ⼀⾏的 数据.
{
"offset":10,
"rows":
[
{
"infoId":"main_info_1111",
"itemName":"AAA项⽬组",
"itemNum":"JXY160909011S"
},
{
"infoId":"main_info_2222",
"itemName":"BBB项⽬组",
"itemNum":"JXY160909012F"
}
],
"total":10
}