學習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 單選及取值的實現方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答