Bootstrap-table 实例
下载
官网地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/
文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
下载解压后可以看到如下目录格式
bootstrap-table/
├── dist/
│ ├── extensions/
│ ├── locale/
│ ├── bootstrap-table.min.css
│ └── bootstrap-table.min.js
├── docs/
└── src/
├── extensions/
├── locale/
├── bootstrap-table.css
└── bootstrap-table.js
怎么使用
下面就要引用我们需要的 css 和 js 文件了,我们可以新建一个文件夹专门用来放我们需要的文件。
环境搭建
新建目录
src
├── css/
└── js/
拷贝
大家都是小白,也懒得去网上找下载,这里我们就在之前从官网下载的那个文件夹里面找,然后放到对应的目录就可以了。
- docs/assets/bootstrap/css/bootstrap.min.css ------> css/bootstrap.min.css
- docs/assets/bootstrap/js/bootstrap.min.js ------> js /bootstrap.min.js
- docs/assets/js/jquery.min.js ------> js/jquery.min.js
- dist/bootstrap-table.min.css ------> css/bootstrap-table.min.css
- dist/bootstrap-table.min.js -----> js /bootstrap-table.min.js
- dist/locale/bootstrap-table-zh-CN.js -----> js/bootstrap-table-zh-CN.js
这样我们就完成了这六个文件的拷贝工作…
引入
在 src 目录新建 table_html 文件
<link rel="stylesheet" href="src/css/bootstrap.min.css">
<link rel="stylesheet" href="src/css/bootstrap-table.css">
<script src="src/js/jquery.min.js"></script>
<script src="src/js/bootstrap.min.js"></script>
<script src="src/js/bootstrap-table.js"></script>
<script src="src/js/bootstrap-table-zh-CN.js"></script>
通过 data 属性 使用
通过table的 data-url 属性 指定数据源
<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>
通过 js
<table id="table"></table>
<script>
$('#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'
}]
});
</script>
我们也可以通过设置远程的 url 如 url: 'data1.json'
来加载数据。
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
{
"total": "10",
"rows": [
{
"id": "1",
"name":"1",
"price":"$1"
},
{
"id": "2",
"name":"2",
"price":"$1"
}
]
}
报错
这个错误好像是 Jquery 访问的跨域问题,网上有各种解决办法,但是感觉好麻烦啊…于是只好把文件放到 Nginx 服务器上了。
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.