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 相关文章推荐
jquery nth-child()选择器的简单应用
Jul 10 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
JavaScript实现轮播图效果
Oct 30 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
javascript常用对话框小集
2013/09/13 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
JavaScript实现随机点名器
2020/03/25 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
Python实现简单的代理服务器
2015/07/25 Python
zookeeper python接口实例详解
2018/01/18 Python
django_orm查询性能优化方法
2018/08/20 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
委托书范本
2014/04/02 职场文书
办公用房租赁协议书
2014/11/29 职场文书