值得分享的轻量级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 相关文章推荐
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php获取网页内容方法总结
2008/12/04 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
关于python 跨域处理方式详解
2020/03/28 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
优秀大学生推荐信范文
2013/11/28 职场文书
新任教师自我鉴定
2014/02/24 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
电话客服工作职责
2014/07/27 职场文书
夏季药店促销方案
2014/08/22 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
2016国培研修心得体会
2016/01/08 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers