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

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

手機(jī)站
千鋒教育

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

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

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

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

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

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

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

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

一、多行多列表頭

在實(shí)際項(xiàng)目中,表格的表頭通常不僅包含一行標(biāo)題,還會(huì)有更復(fù)雜的表頭需求,如下圖所示:


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

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


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

二、合并單元格

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


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

通過(guò)rowspancolspan屬性來(lái)實(shí)現(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í)際項(xiàng)目中,表格的列寬不一定相等,需要設(shè)置列寬自適應(yīng)表格寬度,如下圖所示:


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

通過(guò)設(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)文字溢出處理

在實(shí)際項(xiàng)目中,表格的單元格內(nèi)文字可能會(huì)過(guò)長(zhǎng),需要設(shè)置文字溢出顯示省略號(hào),如下圖所示:


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

五、分頁(yè)與搜索

在實(shí)際項(xiàng)目中,表格的數(shù)據(jù)可能會(huì)很多,需要設(shè)置分頁(yè)和搜索功能來(lái)提高用戶體驗(yàn)和數(shù)據(jù)查詢(xún)效率,如下圖所示:


layui.use('table', function(){
  var table = layui.table;
  
  //執(zhí)行渲染
  table.render({
    elem: '#demo'
    ,url: '/demo/table/user/' //數(shù)據(jù)接口
    ,page: true //開(kāi)啟分頁(yè)
    ,loading:true  //開(kāi)啟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: '評(píng)分', width: 80, sort: true}
      ,{field: 'classify', title: '職業(yè)', width: 100}
      ,{field: 'wealth', title: '財(cái)富', width: 135, sort: true,templet: function(d){
        return '¥' + d.wealth;
      }}
    ]]
  });
});

使用Layui的table組件,通過(guò)page: true屬性開(kāi)啟分頁(yè),loading:true屬性開(kāi)啟loading,通過(guò)where屬性傳遞where條件,示例代碼如上。

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專(zhuān)屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(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
Pingfangsc字體詳解

一、字體描述Pingfangsc字體是一種被廣泛用于中文設(shè)計(jì)領(lǐng)域的字體,其正式名稱(chēng)為蘋(píng)方-簡(jiǎn),是由蘋(píng)果公司與微軟公司共同開(kāi)發(fā)的,用于替代傳統(tǒng)的中...詳情>>

2023-11-23 02:38:00
linux gbd調(diào)試,linuxadb調(diào)試

adb工具linux好不好1、LinuxADB更穩(wěn)定。Linux是Android開(kāi)發(fā)的主要平臺(tái)之一,ADB的開(kāi)發(fā)和測(cè)試也更多地針對(duì)Linux環(huán)境,Linux上的ADB在穩(wěn)定性方面...詳情>>

2023-11-23 02:32:09
npm設(shè)置代理的方法用法介紹

一、什么是npm代理npm代理指的是npm包管理器在使用時(shí)通過(guò)代理訪問(wèn)npm服務(wù)器獲取依賴(lài)包的過(guò)程。在某些情況下,我們需要npm走代理才能訪問(wèn)到npm服...詳情>>

2023-11-23 02:23:36
在Ubuntu上安裝中文字體

在Ubuntu系統(tǒng)中安裝中文字體是很必要的,因?yàn)橹形沫h(huán)境下如果沒(méi)有合適的字體,會(huì)導(dǎo)致顯示效果非常差。下面我們將從以下幾個(gè)方面來(lái)闡述在Ubuntu上...詳情>>

2023-11-23 02:12:48
interval1day詳解

一、interval1day的概念和用途interval1day是一個(gè)時(shí)間間隔,表示每天的時(shí)間段。在編程中,我們可以使用interval1day來(lái)表示每天的某些觸發(fā)事件,...詳情>>

2023-11-23 01:29:36