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');
 });
 // [项目立项] 按钮点击事件
 $('#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 单选及取值的实现方法网站的支持！

来源：http://blog.csdn.net/muraty/article/details/54312119