解決layui數(shù)據(jù)表格排序圖標(biāo)被超出的表頭擠出去的問題
更新時間：2019年09月19日 10:31:30 作者：山村碼農(nóng)
今天小編就為大家分享一篇解決layui數(shù)據(jù)表格排序圖標(biāo)被超出的表頭擠出去的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如果表頭過長,會出現(xiàn)超出顯示三個省略號,然后把排序圖標(biāo)擠出去,看不到了,
效果如下
解決辦法就是給圖標(biāo)加定位，過長的時候加上
.show-sort{
position: absolute;
right: 7px;
top: 5px;
}
$('.layui-table-header tr th').each(function(i,ths){
$(this).find('span:first').attr('title',$(this).find('span:first').text()); // 劃過顯示
if($(this).find('span:first').width() > $(this).find('.layui-table-cell').width()){
$(this).find('span:last').addClass('show-sort')
}else{
$(this).find('span:last').removeClass('show-sort')
}
})
修改后效果如下
以上這篇解決layui數(shù)據(jù)表格排序圖標(biāo)被超出的表頭擠出去的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
一個簡單但常用的javascript表格樣式_鼠標(biāo)劃過行變色 簡潔實現(xiàn)
經(jīng)常性的會需要使用表格顯示一些東西，當(dāng)表格比較大的時候一眼望去腦袋可能會有些暈，經(jīng)常性的因為沒看準(zhǔn)行而出現(xiàn)誤操作，一般解決辦法是交替行變行或者鼠標(biāo)劃過行變色2008-09-09
如何利用Web Speech API之speechSynthesis實現(xiàn)文字轉(zhuǎn)語音功能
Web Speech API使你能夠?qū)⒄Z音數(shù)據(jù)合并到Web應(yīng)用程序中,SpeechSynthesisUtterance是HTML5中新增的API,用于將指定文字合成為對應(yīng)的語音,這篇文章主要介紹了利用Web Speech API之speechSynthesis實現(xiàn)文字轉(zhuǎn)語音功能,需要的朋友可以參考下2024-06-06
近才開始系統(tǒng)的研究js，對js的興趣源于對JQuery的應(yīng)用。之前只會用js做簡單的計算函數(shù)，后來由于需要做特效，故接觸JQ，看著API，基本的特效都能完成，但相反，如果用js去實現(xiàn)，估計自己很難寫得出來，所以下定決心系統(tǒng)的看看js。2009-11-11
JS使用AudioContext實現(xiàn)音頻流實時播放
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用AudioContext實現(xiàn)音頻流實時播放功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記9)
這篇文章主要介紹了談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記9)的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)旋轉(zhuǎn)大風(fēng)車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了JS清除選擇內(nèi)容的方法,較為詳細(xì)的分析了js操作文本的技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了正則表達(dá)式基本語法及表單驗證操作,較為詳細(xì)的分析了正則表達(dá)式的基本語法以及基于JS實現(xiàn)的表單正則驗證操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JS實現(xiàn)微信里判斷頁面是否被分享成功的方法,結(jié)合實例形式分析了js調(diào)用微信接口判斷網(wǎng)頁分享功能的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了Json?Web?Token在前后端實踐思考分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11