第一次记录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中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
分享几个JavaScript运算符的使用技巧
Apr 24 Javascript
原生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编程网上资源导航
2006/10/09 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
教你安装python Django(图文)
2013/11/04 Python
python实现保存网页到本地示例
2014/03/16 Python
python3 shelve模块的详解
2017/07/08 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python 发送json数据操作实例分析
2019/10/15 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
python raise的基本使用
2020/09/10 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
党校培训思想汇报
2014/01/03 职场文书
触摸春天教学反思
2014/02/03 职场文书
企业节能减排实施方案
2014/03/19 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
员工离职证明范本
2015/06/12 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
八年级英语教学反思
2016/02/15 职场文书
情况说明书格式及范文
2019/06/24 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript