BootStrapTable 單選及取值的實現(xiàn)方法

更新時間：2017年01月10日 13:50:10 作者：muraty

學習bootstrapTable 一直沒有找到單選框的選定的和取值的教程,接下來通過本文給大家分享BootStrapTable 單選及取值的實現(xiàn)方法，非常不錯，需要的朋友參考下

學習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)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: