快捷導(dǎo)航

基于Bootstrap table組件實(shí)現(xiàn)多層表頭的實(shí)例代碼

更新時(shí)間：2017年09月07日 11:57:29 作者：沉默王二

Bootstrap table還有一個(gè)很多強(qiáng)大的功能，下面就通過(guò)本文給大家分享基于Bootstrap table組件實(shí)現(xiàn)多層表頭的實(shí)例代碼，需要的朋友參考下吧

在做私活的時(shí)候，有一個(gè)需求是要在頁(yè)面上實(shí)現(xiàn)多層表頭。一開(kāi)始有點(diǎn)懵，不知道怎么來(lái)實(shí)現(xiàn)，我回想起在JFTT的時(shí)候，曾用過(guò)Flex版的多層表頭，不過(guò)那離現(xiàn)在已經(jīng)很久遠(yuǎn)了，久遠(yuǎn)到Flex已經(jīng)被淘汰出局了。于是在網(wǎng)上折騰了好一會(huì)兒，終于找到一款用起來(lái)簡(jiǎn)單，效果又很不錯(cuò)的組件——Bootstrap-table。

Bootstrap-table還有很多強(qiáng)大的功能，但這篇文章我們把關(guān)注點(diǎn)只放在多層表頭上，關(guān)注點(diǎn)確定后，這篇博客就很簡(jiǎn)單了，但我覺(jué)得還是很有必要推而廣之——因?yàn)橹霸诳炊渲鞒值摹对?shī)詞大會(huì)》，里面有很多基礎(chǔ)的知識(shí)，竟然有很多人都答不上來(lái)，搞得我一度很“囂張”，對(duì)老婆夸下?？谡f(shuō)我也能過(guò)第一輪，但事實(shí)是我過(guò)不了——我也不會(huì)寫(xiě)“碧玉妝成一樹(shù)高，萬(wàn)條垂下綠絲絳（tao）”中的tao字。

所以，文章不在于其難度，而在于其意義——在月球上邁上一小步和在地球上邁上一小步差別就在于“這是個(gè)人邁出的一小步，但卻是人類邁出的一大步?！?/p>

0.效果圖

1.實(shí)現(xiàn)方法

<html>
<head>
<title>多層表頭</title>
<link  rel="stylesheet">
<style type="text/css">
.table td, .table th {
 font-style: normal;
 font-weight: normal;
 text-align:center;
}
.bootstrap-table {
 width: 100%;
}
</style>
</head>
<body>
 <table data-toggle="table">
  <thead>
   <tr>
    <th data-colspan="1">妻子</th>
    <th data-colspan="2">車子</th>
    <th data-colspan="3">房子</th>
    <th data-rowspan="2">總價(jià)值</th>
   </tr>
   <tr>
    <th>唯一</th>
    <th>Mini</th>
    <th>Smart</th>
    <th>90平</th>
    <th>149平</th>
    <th>別墅</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>∞</td>
    <td>30萬(wàn)</td>
    <td>20萬(wàn)</td>
    <td>60萬(wàn)</td>
    <td>100萬(wàn)</td>
    <td>看著辦</td>
    <td>∞∞</td>
   </tr>
  </tbody>
 </table>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
</body>
</html>

2.具體步驟

第一步，通過(guò)CDN引入jquery和bootstrap-table。

<link  rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

第二步，第一層表頭；

<tr>
 <th data-colspan="1">妻子</th>
 <th data-colspan="2">車子</th>
 <th data-colspan="3">房子</th>
 <th data-rowspan="2">總價(jià)值</th>
</tr>

通過(guò)data-colspan指定二級(jí)表頭橫向有多少個(gè)，縱向?yàn)?；

通過(guò)data-rowspan指定二級(jí)表頭縱向有多少個(gè)，橫向?yàn)?；

第三步，第二層表頭；

<tr>
 <th>唯一</th>
 <th>Mini</th>
 <th>Smart</th>
 <th>90平</th>
 <th>149平</th>
 <th>別墅</th>
</tr>

注意data-rowspan=”2”對(duì)應(yīng)的第二層表頭就不需要指定了。

第三步，啟用bootstrap-table。

<table data-toggle="table">
</table>

總結(jié)

以上所述是小編給大家介紹的Bootstrap table實(shí)現(xiàn)多層表頭的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: