第一次记录Bootstrap table学习笔记(1)


Posted in Javascript onMay 18, 2017

第一次使用Bootstrap-table这个表格插件,记录一下使用过程中遇到的问题。

|引入CSS文件

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

|引入相关库

我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>

|启用Bootstrap Table插件:

官方文档中给出了我们有两种那个方式来启用bootstrap-table插件:

1、通过data属性的方式:

<table data-toggle="table">
 <thead>
 <tr>
  <th>Item ID</th>
  <th>Item Name</th>
  <th>Item Price</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>1</td>
  <td>Item 1</td>
  <td>$1</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Item 2</td>
  <td>$2</td>
 </tr>
 </tbody>
</table>

2、通过js的方式:

//只需要HTML中写下table标签,并设置id
<table id="table"></table>
$('#table').bootstrapTable({
 columns: [{
 field: 'id',

 title: 'Item ID'
 }, {
 field: 'name',
 title: 'Item Name'
 }, {
 field: 'price',
 title: 'Item Price'
 }],
 data: [{
 id: 1,
 name: 'Item 1',
 price: '$1'
 }, {
 id: 2,
 name: 'Item 2',
 price: '$2'
 }]
});

也可以通过url获取数据

$('#table').bootstrapTable({
 url: 'data1.json',
 columns: [{
 field: 'id',
//与返回值的JSON数据的key值对应
 title: 'Item ID'
//列名
 }, {
 field: 'name',
 title: 'Item Name'
 }, {
 field: 'price',
 title: 'Item Price'
 }, ]
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
常用的javascript function代码
May 23 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
原生js轮播特效
May 18 #Javascript
js实现放大镜特效
May 18 #Javascript
vue v-on监听事件详解
May 17 #Javascript
vue v-model表单控件绑定详解
May 17 #Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 #Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 #Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 #Javascript
You might like
PHP 导出Excel示例分享
2014/08/18 PHP
如何使用php实现评委评分器
2015/07/31 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
浅析javascript的return语句
2015/12/15 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python 用下标截取字符串的实例
2018/12/25 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
银行领导证婚词
2014/01/11 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
五年级音乐教学反思
2014/02/06 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
小学生差生评语
2014/12/29 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL