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 单选及取值的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！