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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
原生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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP开发中常用的8个小技巧
2008/08/27 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
JS中的作用域链
2017/03/01 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Python程序运行原理图文解析
2018/02/10 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
python 多线程重启方法
2019/02/18 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
如何理解Python中的变量
2020/06/01 Python
文秘人员工作职责
2014/01/31 职场文书
医院检讨书范文
2014/02/01 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
教室布置标语
2014/06/26 职场文书
大学生安全责任书
2014/07/25 职场文书
单位员工收入证明样本
2014/10/09 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
车间安全生产管理制度
2015/08/06 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书