国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > Layui復(fù)雜表頭用法介紹

Layui復(fù)雜表頭用法介紹

來源:千鋒教育
發(fā)布人:xqq
時間: 2023-11-23 00:28:24 1700670504

本文將介紹如何使用Layui實現(xiàn)復(fù)雜表頭,包含多行多列表頭和合并單元格等功能。

一、多行多列表頭

在實際項目中,表格的表頭通常不僅包含一行標題,還會有更復(fù)雜的表頭需求,如下圖所示:


標題1 標題2 標題3
子標題21 子標題22 子標題31 子標題32
內(nèi)容1 內(nèi)容2-1 內(nèi)容2-2 內(nèi)容3-1 內(nèi)容3-2

通過rowspancolspan屬性來實現(xiàn)多行列合并,rowspan合并行,colspan合并列,示例代碼如下:


th[ rowspan ]{
    vertical-align: middle !important;
    text-align: center !important;
}
th[ colspan ]{
    vertical-align: middle !important;
    text-align: center !important;
}

二、合并單元格

在實際項目中,表格的內(nèi)容需要合并單元格,如下圖所示:


標題1 標題2 標題3
內(nèi)容1 內(nèi)容2-1 內(nèi)容3-1
內(nèi)容2-2

通過rowspancolspan屬性來實現(xiàn)單元格合并,示例代碼如下:


td[ rowspan ]{
    vertical-align: middle !important;
    text-align: center !important;
}
td[ colspan ]{
    vertical-align: middle !important;
    text-align: center !important;
}

三、表格列寬自適應(yīng)

在實際項目中,表格的列寬不一定相等,需要設(shè)置列寬自適應(yīng)表格寬度,如下圖所示:


標題1 標題2 標題3
內(nèi)容1 內(nèi)容2-1 內(nèi)容3-1
內(nèi)容1 內(nèi)容2-2 內(nèi)容3-2

通過設(shè)置table-layout: fixed;屬性,將表格的布局模式設(shè)置為固定,示例代碼如下:


.layui-table td, .layui-table th{
    padding: 10px 8px;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    height: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.layui-table td{
    border-width: 0;
    border-bottom: 1px solid #e2e2e2;
}
.layui-table th{
    color: #666;
    background-color: #f2f2f2;
    font-weight: 400;
    border-width: 0;
    border-bottom: 1px solid #e2e2e2;
}
table {
    border-collapse: collapse;
    table-layout: fixed;
    border-radius: 4px;
    overflow: hidden;
}

四、單元格內(nèi)文字溢出處理

在實際項目中,表格的單元格內(nèi)文字可能會過長,需要設(shè)置文字溢出顯示省略號,如下圖所示:


.layui-table td{
    padding: 10px 8px;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    height: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

五、分頁與搜索

在實際項目中,表格的數(shù)據(jù)可能會很多,需要設(shè)置分頁和搜索功能來提高用戶體驗和數(shù)據(jù)查詢效率,如下圖所示:


layui.use('table', function(){
  var table = layui.table;
  
  //執(zhí)行渲染
  table.render({
    elem: '#demo'
    ,url: '/demo/table/user/' //數(shù)據(jù)接口
    ,page: true //開啟分頁
    ,loading:true  //開啟loading
    ,where: 'where條件'
    ,cols: [[ //表頭
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用戶名', width:120}
      ,{field: 'sex', title: '性別', width:80, sort: true}
      ,{field: 'city', title: '城市', width:100}
      ,{field: 'sign', title: '簽名', width: 200,templet: function(d){ return d.sign }}
      ,{field: 'experience', title: '積分', width: 80, sort: true}
      ,{field: 'score', title: '評分', width: 80, sort: true}
      ,{field: 'classify', title: '職業(yè)', width: 100}
      ,{field: 'wealth', title: '財富', width: 135, sort: true,templet: function(d){
        return '¥' + d.wealth;
      }}
    ]]
  });
});

使用Layui的table組件,通過page: true屬性開啟分頁,loading:true屬性開啟loading,通過where屬性傳遞where條件,示例代碼如上。

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取

上一篇

sns.heatmap詳解

下一篇

詳解rollbackfor
相關(guān)推薦HOT