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 24 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
Angular实现响应式表单
Aug 04 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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
Linux编译升级php的详细方法
2013/11/04 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
ArrayList类(增强版)
2007/04/04 Javascript
Javascript中Eval函数的使用说明
2008/10/11 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python中的字典使用分享
2016/07/31 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
python多线程使用方法实例详解
2019/12/30 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
Python csv文件记录流程代码解析
2020/07/16 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
什么是反射
2012/03/17 面试题
秋季运动会通讯稿
2014/01/24 职场文书
学校消防安全制度
2014/01/30 职场文书
文艺晚会主持词
2014/03/24 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python