Bootstrap-table 实例

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.

效果展示