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 联动日历实现代码
May 31 Javascript
AngularJS快速入门
Apr 02 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
JavaScript实现Tab选项卡切换
Feb 13 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 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 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
解决Django连接db遇到的问题
2019/08/29 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
GWebs公司笔试题
2012/05/04 面试题
创业计划书怎样才能打动风投
2014/01/01 职场文书
骨干教师培训制度
2014/01/13 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
护林防火标语
2014/06/27 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
家长会开场白和结束语
2015/05/29 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android