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 相关文章推荐
jQuery前台数据获取实现代码
Mar 16 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
JS跨域总结
Aug 30 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
将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基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
历史学专业个人的自我评价
2013/10/13 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
和解协议书
2014/04/16 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
python数字图像处理之图像的批量处理
2022/06/28 Python