Bootstrap table简单使用总结


Posted in Javascript onFebruary 15, 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 相关文章推荐
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
原生js轮播(仿慕课网)
Feb 15 #Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 #Javascript
Canvas实现放射线动画效果
Feb 15 #Javascript
微信小程序 开发经验整理
Feb 15 #Javascript
bootstrap table操作技巧分享
Feb 15 #Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 #Javascript
JS原型与原型链的深入理解
Feb 15 #Javascript
You might like
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
jquery为页面增加快捷键示例
2014/01/31 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
DOM 高级编程
2015/05/06 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
js电话号码验证方法
2015/09/28 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
介绍一下#error预处理
2015/09/25 面试题
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
大四学生个人总结
2015/02/15 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python