值得分享的轻量级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 新节点的创建 删除 的步骤
Jul 04 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
JS定义类的六种方式详解
May 12 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
mac上node.js环境的安装测试
Jul 03 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 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
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
javascript String 对象
2008/04/25 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python logging类库使用例子
2014/11/22 Python
详解Python验证码识别
2016/01/25 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
python dict 相同key 合并value的实例
2019/01/21 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Linux操作面试题
2012/05/16 面试题
2015年农村党员公开承诺事项
2015/04/28 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP