值得分享的轻量级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 相关文章推荐
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 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
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
python3生成随机数实例
2014/10/20 Python
Python中is与==判断的区别
2017/03/28 Python
Python list与NumPy array 区分详解
2019/11/06 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
新闻学专业应届生求职信
2013/11/08 职场文书
材料化学专业求职信
2014/07/15 职场文书
环保项目建议书
2014/08/26 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
《1942》观后感
2015/06/08 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技