摘要：學習bootstrapTable 一直沒有找到 單選框的選定的和取值的教程,今天寫一個.作為筆記1. 效果圖: 點擊 bootstrapTable 單選的按鈕, 選中該列, 取到該列的所有值.2. js 代碼 : bootstrapTable 初始化    a. 注意:       singleSe

學習bootstrapTable 一直沒有找到 單選框的選定的和取值的教程,今天寫一個.作為筆記

1. 效果圖: 點擊 bootstrapTable 單選的按鈕, 選中該列, 取到該列的所有值.

2. js 代碼 : bootstrapTable 初始化

    a. 注意:       

singleSelect : true, // 單選checkbox
     columns : [ { checkbox: true } ] // bootstrapTable 顯示單選checkbox 列

$().ready(function() {
  
  // bootstrapTable 表格數(shù)據(jù)初始化
  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('請選擇一列數(shù)據(jù)!');
      return false;
    }else{
      console.info(SELECTContent);
      $('#item_project_modal').modal('show');   // 項目立項面板
    }
  });
});

3. bootstrapTable url : '<c:url value='/item/entry/main_info/list_data'/>', 后臺json數(shù)據(jù)

    注意. 第一個圖片中的 chrome F12 中的 Object 就是SELECTContent =table.bootstrapTable('getSelections')[0] 中的數(shù)據(jù)了 這樣我們就能取到 bootstrap 單選框 選擇 一行的 數(shù)據(jù).

{
 "offset":10,
 "rows":
 [
  {
   "infoId":"main_info_1111",
   "itemName":"AAA項目組",
   "itemNum":"JXY160909011S"
  },
  {
   "infoId":"main_info_2222",
   "itemName":"BBB項目組",
   "itemNum":"JXY160909012F"
  }
 ],
 "total":10
}

    更多關于BootStrapTable 單選及取值的實現(xiàn)方法請關注PHP中文網(wǎng)（www.miracleart.cn）其他文章！