Layui:數據表格渲染二級表頭


//方法渲染
table.render({
  cols:  [[ //標題欄
    {field: 'username', title: '聯系人', width: 80, rowspan: 2} //rowspan即縱向跨越的單元格數
    ,{field: 'amount', title: '金額', width: 80, rowspan: 2}
    ,{align: 'center', title: '地址', colspan: 3} //colspan即橫跨的單元格數,這種情況下不用設置field和width
  ], [
    {field: 'province', title: '省', width: 80}
    ,{field: 'city', title: '市', width: 120}
    ,{field: 'county', title: '詳細', width: 300}
  ]]
});
 
//自動渲染
<table class="layui-table" lay-data="{基礎參數}">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:80}" rowspan="2">聯系人</th>
      <th lay-data="{field:'amount', width:120}" rowspan="2">金額</th>
      <th lay-data="{align:'center'}" colspan="3">地址</th>
    </tr>
    <tr>
      <th lay-data="{field:'province', width:80}">省</th>
      <th lay-data="{field:'city', width:120}">市</th>
      <th lay-data="{field:'county', width:300}">詳細</th>
    </tr>
  </thead>
</table>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM