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

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > Layui復雜表頭用法介紹

Layui復雜表頭用法介紹

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

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

一、多行多列表頭

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


標題1 標題2 標題3
子標題21 子標題22 子標題31 子標題32
內容1 內容2-1 內容2-2 內容3-1 內容3-2

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


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

二、合并單元格

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


標題1 標題2 標題3
內容1 內容2-1 內容3-1
內容2-2

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


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

三、表格列寬自適應

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


標題1 標題2 標題3
內容1 內容2-1 內容3-1
內容1 內容2-2 內容3-2

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


.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;
}

四、單元格內文字溢出處理

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


.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;
}

五、分頁與搜索

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


layui.use('table', function(){
  var table = layui.table;
  
  //執行渲染
  table.render({
    elem: '#demo'
    ,url: '/demo/table/user/' //數據接口
    ,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: '職業', width: 100}
      ,{field: 'wealth', title: '財富', width: 135, sort: true,templet: function(d){
        return '¥' + d.wealth;
      }}
    ]]
  });
});

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

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

上一篇

sns.heatmap詳解

下一篇

詳解rollbackfor
相關推薦HOT