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>屬性中定義的。json

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

  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"                                             //顯示列詳細信息按鈕      工具條
    url

  8. 後續繼續更。。。
    spa

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

示例:.net


<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. 後續繼續更。。。
相關文章
相關標籤/搜索