html 表格单选,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 : '',

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 = '' + row.itemNum + ' ';

if (isJoinItem(value)) url = '' + row.itemNum + ' ';

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

$('#item_project_modal').modal('show'); // 项目立项面板

}

});

});

3. bootstrapTable url : '', 后台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 单选及取值的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！