最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Bootstrap table学习心得 问题解答
时间：2017-05-20 编辑：简简单单 来源：一聚教程网
ps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">第一次使用Bootstrap-table这个表格插件，记录一下使用过程中遇到的问题。
|引入CSS文件
|引入相关库
我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件
<-- put your locale files after bootstrap-table.js -->
|启用Bootstrap Table插件：
官方文档中给出了我们有两种那个方式来启用bootstrap-table插件：
1、通过data属性的方式：
2、通过js的方式：
//只需要HTML中写下table标签，并设置id
| 代码如下 | 复制代码 |
|
$('#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'
}, ]
});
| |
以上就是本文的全部内容，希望对大家的学习有所帮助
-
上一个： 原生js轮播特效怎么制作
相关文章
- Bootstrap table学习心得 问题解答 05-21
- SpringBoot测试配置属性与web启动环境解析 10-24
- vue中将el-switch值true、false改为number类型的1和0解析 10-24
- Vue中的路由配置项meta使用解读 10-24
- SpringBoot自定义bean绑定解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24