首页 > 编程 > JavaScript > 正文

BootStrapTable 单选及取值的实现方法

2019-11-19 18:02:15
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表