Bootstrap Table簡單例子學習

時間 2019-11-06

標籤 bootstrap table 簡單例子學習欄目 Bootstarp 简体版

原文原文鏈接

一、Bootstrap Table簡介css

Bootstrap Table是基於Bootstrap的輕量級表格插件，只須要簡單的配置就能夠實現強大的支持固定表頭、單複選、排序、分頁、搜索以及自定義表頭等功能。html

二、所須要的庫：java

bootstrap.min.cssjquery

bootstrap-table.cssweb

jquery.min.jsjson

bootstrap.min.jsbootstrap

bootstrap-table.js學習

三、Bootstrap Table獲取數據的方式：url

Bootstrap Table經過data屬性標籤或者JavaScript來顯示錶格數據：spa

（1）、經過data屬性標籤

在表格中設置data-toggle=「table」，此方式能夠在不寫JavaScript的狀況下啓用Bootstrap Table。

<table data-toggle="table" data-url="data.json">
    <thead>
        ...
    </thead>
</table>

（2）、經過JavaScipt向表格傳入數據：

<table id="table"></table>

<1>、簡單的靜態數據

                $('#table').bootstrapTable({                
                    columns: [{
                        field: 'id',
                        title: 'Item ID'
                    }, {
                        field: 'username',
                        title: 'Item Username'
                    }, {
                        field: 'password',
                        title: 'Item Passowrd'
                    }],
                    data: [{
                        id: 1,
                        username: 'Item 1',
                        passowrd: '$1'
                    }, {
                        id: 2,
                        username: 'Item 2',
                        password: '$2'
                    }]});

<2>、經過url獲取數據

                $('#table').bootstrapTable({                
                    url: 'data1.json',
                    columns: [{
                        field: 'id',
                        title: 'Item ID'
                    }, {
                        field: 'username',
                        title: 'Item Username'
                    }, {
                        field: 'passowrd',
                        title: 'Item Passowrd'
                    }, ]});

四、Bootstrap Table簡單的demo：

<!doctype html>
<html>
    <head>
    
        <meta charset="utf-8">
        
        <title>Bootstrap Table的demo</title>
        
        <link rel="stylesheet" href="bootstrap.css">
        
        <link rel="stylesheet" href="bootstrap-table.css">
    
    </head>
    
<body>
 <table id="table"></table>
<!--引入相關的js文件-->
 <script src="jquery.min.js"></script>
 <script src="bootstrap.js"></script>
 <script src="bootstrap-table.js"></script>
    
 <!--自定義javaScript-->
  <script>
     $('#table').bootstrapTable({
       columns: [{
            field: 'id',
            title: 'Item ID'
           }, {
            field: 'username',
            title: 'Item Username'
           }, {
            field: 'passsword',
            title: 'Item Password'
       }],
       data: [{
            id: 1,
            username: 'Item 1',
            passowrd: '123'
           }, {
            id: 2,
            username: 'Item 2',
            passowrd: '123
           }]
      });
  </script>
</body>
</html>

五、Bootstrap Table學習文檔

http://wenzhixin.net.cn/p/bootstrap-table/docs/documentation.html