Bootstrap Table 學習筆記

表頭不能對齊的問題：blog.csdn.net/xinshijiman…

設置列的寬度不起做用：blog.csdn.net/mrczr/artic…

一、先開個頭：從table標籤開始看

<table data-toggle="table"
               data-url="../json/data1.json"
               data-height="400"
               data-row-style="rowStyle">
</table>複製代碼

許多表格上的小組件都是在這個膩害的<table></table>屬性中定義的。

好了，下一步該主題了。不愛扯。羅列一下在table屬性中定義的有哪些吧：

1. data-url="../json/data1.json"數據路徑。
   
2. data-height="400"表格高度。
   
3. data-row-style="rowStyle"設置row的樣式。
   
4. data-classes="table table-no-bordered"表格無邊框。
   
5. data-click-to-select="true"添加選擇按鈕。如圖：

6. data-show-columns="true"添加控制顯示列的按鈕。如圖：

   
   

7. data-toolbar="#toolbar"                                                //是否顯示工具條    data-show-refresh="true"                                                //顯示刷新按鈕           data-show-toggle="true"                                                // 顯示切換按鈕    data-show-columns="true"                                             //顯示列詳細信息按鈕      工具條
   

8. 後續繼續更。。。
   

二、table中、、標籤的設置：

示例：

<thead>
   <tr>
       <th data-field="id" data-halign="right" data-align="center">Item ID</th>
       <th data-field="name" data-halign="center" data-align="left">Item Name</th>
       <th data-field="price" data-halign="left" data-align="right">Item</th>
   </tr>
</thead>複製代碼

1. th中的data-field="id"是要接收的數據對應的索引。
2. data-halign="right"是thead的內容水平位置。
   
3. data-align="right"是正文內容水平位置。
   
4. data-valign="middle"是垂直位置。
   
5. data-radio="true"添加選擇框。
6. data-switchable="false" 該列不被控制是否顯示。也能夠說始終顯示。
7. data-visible="false"列的初始化不顯示。
   

   
   

8. 後續繼續更。。。