BootStrapTable 单选及取值的实现方法


Posted in Javascript onJanuary 10, 2017

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

Javascript 相关文章推荐
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 #Javascript
js自定义QQ菜单效果
Jan 10 #Javascript
js实现将json数组显示前台table中
Jan 10 #Javascript
详解Vue自定义过滤器的实现
Jan 10 #Javascript
JS实现的表头列头固定页面功能示例
Jan 10 #Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 #Javascript
微信小程序 地图map详解及简单实例
Jan 10 #Javascript
You might like
7个超级实用的PHP代码片段
2011/07/11 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
机器学习python实战之手写数字识别
2017/11/01 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python爬虫用mongodb的理由
2020/07/28 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
What is view? why do we have view?
2012/06/22 面试题
网络技术支持面试题
2013/04/22 面试题
公司活动邀请函
2014/01/24 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
小学生手册家长评语
2014/04/16 职场文书
给学校建议书范文
2014/05/13 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang