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 相关文章推荐
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
vuejs指令详解
Feb 07 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 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
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
详解php协程知识点
2018/09/21 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
语义化 H1 标签
2008/01/14 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
可贵的沉默教学反思
2014/02/06 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL
MySQL时区造成时差问题
2022/04/13 MySQL