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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 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删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
python time模块用法实例详解
2014/09/11 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python实现静态web服务器
2019/09/03 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
什么是URL
2015/12/13 面试题
2014年师德承诺书
2014/05/23 职场文书
先进党支部事迹材料
2014/12/24 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android