值得分享的轻量级Bootstrap Table表格插件


Posted in Javascript onMay 30, 2016

基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置,就可以拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能,更好的提高开发效率和减少开发时间。

值得分享的轻量级Bootstrap Table表格插件

1、插件描述:Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框、复选框、排序、分页等,插件下载。

2、特点:

基于Bootstrap 3开发(同时支持 Bootstrap 2)

响应式界面

固定表头

完全可配置

支持data属性

显示/隐藏列

显示/隐藏表头

使用AJAX获取JSON数据

点击表头可简单的进行排序

支持自定义列显示

支持单/复选

强大的分页功能

支持名片布局

支持多语言

3、使用方法:

1)、在html页面的head标签中引入Bootstrap库(假如你的项目还没使用)和bootstrap-table.css。

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

2)、在head标签或者在body标签闭合前(比较推荐)引入jQuery库和Bootstrap库(假如你的项目还没使用)和bootstrap-table.js。

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
 <script src="bootstrap-table.js"></script>

3)、指定数据源,这里有两种方式
方式1:通过data属性标签
在一个普通的表格中设置data-toggle="table"可以在不写JavaScript的情况下启用Bootstrap Table。

<table data-toggle="table" data-url="data.json">
   <thead>
    ... 
   </thead>
  </table>

方式2:通过JavaScript设置数据源
通过JavaScript来启用带有id属性的Table。

$('#table').bootstrapTable({
   url: 'data.json' 
  });:

4、Bug描述:

值得分享的轻量级Bootstrap Table表格插件

用标签属性方式设置字段formatter时,发现没有效果,图片不清楚,大家可以直接下载实例进行研究,下载地址。
如:<th data-field="sex" data-formatter="format_sex">性别</th>
1)、原因:
bootstrap-table.js第399行,代码中只判断了formatter typeof 为function的情况
2)、解决办法:
修改第399行代码块:
修改前

if (typeof that.header.formatters[j] === 'function') {
 value = that.header.formatters[j](value, item);
}

修改后:

if (typeof that.header.formatters[j] === 'function') {
     value = that.header.formatters[j](value, item);
    }else if(typeof that.header.formatters[j] === 'string') {
     if(typeof window[that.header.formatters[j]] === 'function') {
     value = window[that.header.formatters[j]](value, item);
     }
    }

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是为大家分享的Bootstrap Table使用方法,希望对大家熟练掌握Bootstrap Table使用方法有所帮助。

Javascript 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
jquery实现提示语淡入效果
May 05 jQuery
详解VueJs前后端分离跨域问题
May 24 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
js获取所有checkbox的值的简单实例
May 30 #Javascript
一览画面点击复选框后获取多个id值的方法
May 30 #Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 #Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 #Javascript
限制复选框最多选择项的实现代码
May 30 #Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 #Javascript
JS组件Bootstrap Table使用实例分享
May 30 #Javascript
You might like
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python中实现的RC4算法
2015/02/14 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
深入理解Python变量与常量
2016/06/02 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python批量更改文件名的实现方法
2017/10/29 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
详解python数据结构和算法
2019/04/18 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
应聘自荐书
2013/10/08 职场文书
高中体育教学反思
2014/01/24 职场文书
红高粱观后感
2015/06/10 职场文书
警示教育片观后感
2015/06/17 职场文书
辩论赛新闻稿
2015/07/17 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang