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);
                $('#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
}