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 相关文章推荐
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
js实现磁性吸附的示例
Oct 26 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
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
DOM 基本方法
2009/07/18 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
vue 实现把路由单独分离出来
2020/08/13 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
深入理解Javascript中的this关键字
2015/03/27 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
python开根号实例讲解
2020/08/30 Python
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
入门学习Go的基本语法
2021/07/07 Golang