学习bootstrapTable 一直没有找到 单选框的选定的和取值的教程,今天写一个.作为笔记

1. 效果图: 点击 bootstrapTable 单选的按钮, 选中该列, 取到该列的所有值.

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

标签:
bootstrap,table,单选,bootstrap,table取值

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“BootStrapTable 单选及取值的实现方法”
暂无“BootStrapTable 单选及取值的实现方法”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。