第一次记录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 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
javascript二维数组转置实例
Jan 22 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 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/12/06 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
js使用递归解析xml
2014/12/12 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
JavaScript引用类型Function实例详解
2018/08/09 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
Python基础教程之异常详解
2019/01/10 Python
学习python分支结构
2019/05/17 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python批量生成条形码的示例
2020/10/10 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
美食节策划方案
2014/05/26 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库