Bootstrap table使用方法总结


Posted in Javascript onMay 10, 2017

最近接触一个很棒的插件,Bootstrap table 没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真是牛。

构造方式

1 、HTML

<div class="btn-group hidden-xs"id="exampleTableEventsToolbar" >
 //定义一系列工具栏...
 </div>
<table data-toggle="table"
 data-url="${ctxAdmin}/user/userData?orgId=${orgId}" //table数据来源,json格式
 data-pagination="true" //是否支持分页
 data-show-search="true" //是否显示搜索框功能
 data-show-columns="true" //显示columns功能按钮
 data-icon-size="outline" 
 data-mobile-responsive="true"
 data-height="500" 
 id="tablelist"
 data-side-pagination="server" //支持服务器端分页,默认是client>
  <thead>
  <tr>
  <th data-field="user_id">ID</th>
  <th data-field="username" 
    data-formatter="usernameFormatter" //columns option 参见官网解释
    data-events="usernameEvents">用户名</th>
  <th data-field="real_name">真实姓名</th>
  <th data-field="tel_num">座机</th>
  <th data-field="mobile">手机</th>
  <th data-field="user_type">用户类型</th>
  <th data-field="operation" 
    data-formatter="actionFormatter"
    data-events="actionEvents">操作</th>
  </tr>
  </thead>
</table>

2 、js构造:

(function() {
  $('#tablelist').bootstrapTable({
   url: "${ctxAdmin}/user/userData?orgId=${orgId}",
   search: true, //是否显示搜索框功能
   pagination: true, //是否分页
   showRefresh: true, //是否显示刷新功能 
   showToggle: true,
   showColumns: true,
   iconSize: 'outline',
   // toolbar: '#exampleTableEventsToolbar', 可以在table上方显示的一条工具栏,
   icons: {
    refresh: 'glyphicon-repeat',
    toggle: 'glyphicon-list-alt',
    columns: 'glyphicon-list'
   }
  });

结合官网上展示的Table options,Column options,Events,Methods可以完成很多功能。上面的data-formatter ,data-events就是Column options中的选项 。

data-formatter data-events

要实现如下效果,用上面两个option配合使用即可,一个定义格式,一个定义点击的操作。

Bootstrap table使用方法总结

直接上js代码

//value: 所在collumn的当前显示值,
  //row:整个行的数据 ,对象化,可通过.获取
   //表格-操作 - 格式化 
  function actionFormatter(value, row, index) {
    return '<a class="mod" >修改</a> ' + '<a class="delete">删除</a>';
  }
  //表格 - 操作 - 事件
  window.actionEvents = {
    'click .mod': function(e, value, row, index) {   
       //修改操作
      },
    'click .delete' : function(e, value, row, index) {
       //删除操作 
      }
    }

服务器分页/客户端分页的转换,table刷新

bootstrap默认是客户端分页 ,可通过html标签

data-side-pagination:"client"

或者js中的

sidePagination: 'server'

指定。注意,这两种后台传过来的json数据格式也不一样
client: 正常的json array格式 [{},{},{}]
server: {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数,后面的rows是指当前页面展示的数据量。

有事需要根据情况改变分页方式,就要用到Methods中的
‘refreshOptions' //设置更新时候的options
‘refresh' //设置更新时的 url ,query(往后台传参数)

$("#tablelist").bootstrapTable('refreshOptions', {
    sidePagination: 'client' //改为客户端分页
        });
 $("#tablelist").bootstrapTable('refresh', {
     url: "${ctxAdmin}/user/getsearchuserinfo", //重设数据来源
     query: {username: $('#sea-username').val(),realname: $("#sea-realname").val(),mobile: $("#sea-mobile").val()}//传到后台的参数
          });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 #Javascript
vue-axios使用详解
May 10 #Javascript
详解axios在vue中的简单配置与使用
May 10 #Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JavaScript实现form表单的多文件上传
Mar 27 #Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 #Javascript
利用PM2部署node.js项目的方法教程
May 10 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
股权投资协议书
2016/03/23 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Spring Boot 实现 WebSocket
2022/04/30 Java/Android