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.

效果展示