热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

BootStrapTable单选及取值的实现方法

学习bootstrapTable一直没有找到单选框的选定的和取值的教程,接下来通过本文给大家分享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       : '', 
    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 = '' + row.itemNum + '  '; 
          if (isJoinItem(value))  url = '' + row.itemNum + '  '; 
          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 : '', 后台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 单选及取值的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • 数字账号安全与数据资产问题的研究及解决方案
    本文研究了数字账号安全与数据资产问题,并提出了解决方案。近期,大量QQ账号被盗事件引起了广泛关注。欺诈者对数字账号的价值认识超过了账号主人,因此他们不断攻击和盗用账号。然而,平台和账号主人对账号安全问题的态度不正确,只有用户自身意识到问题的严重性并采取行动,才能推动平台优先解决这些问题。本文旨在提醒用户关注账号安全,并呼吁平台承担起更多的责任。令牌云团队对此进行了长期深入的研究,并提出了相应的解决方案。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • 本文介绍了Windows操作系统的版本及其特点,包括Windows 7系统的6个版本:Starter、Home Basic、Home Premium、Professional、Enterprise、Ultimate。Windows操作系统是微软公司研发的一套操作系统,具有人机操作性优异、支持的应用软件较多、对硬件支持良好等优点。Windows 7 Starter是功能最少的版本,缺乏Aero特效功能,没有64位支持,最初设计不能同时运行三个以上应用程序。 ... [详细]
  • Google在I/O开发者大会详细介绍Android N系统的更新和安全性提升
    Google在2016年的I/O开发者大会上详细介绍了Android N系统的更新和安全性提升。Android N系统在安全方面支持无缝升级更新和修补漏洞,引入了基于文件的数据加密系统和移动版本的Chrome浏览器可以识别恶意网站等新的安全机制。在性能方面,Android N内置了先进的图形处理系统Vulkan,加入了JIT编译器以提高安装效率和减少应用程序的占用空间。此外,Android N还具有自动关闭长时间未使用的后台应用程序来释放系统资源的机制。 ... [详细]
  • 本文介绍了获取关联数组键的列表的方法,即使用Object.keys()函数。同时还提到了该方法在不同浏览器的支持情况,并附上了一个代码片段供读者参考。 ... [详细]
  • 本文讨论了编写可保护的代码的重要性,包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法,如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道,如不规范的命名、重复代码、过长的函数和参数列表等。最后,介绍了如何处理数据泥团和进行函数重构,以提高代码质量和可维护性。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • 本文介绍了一个React Native新手在尝试将数据发布到服务器时遇到的问题,以及他的React Native代码和服务器端代码。他使用fetch方法将数据发送到服务器,但无法在服务器端读取/获取发布的数据。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • SpringBoot整合SpringSecurity+JWT实现单点登录
    SpringBoot整合SpringSecurity+JWT实现单点登录,Go语言社区,Golang程序员人脉社 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
author-avatar
贵族灬阿宝
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有