解决layui数据表格排序图标被超出的表头挤出去的问题

 更新时间:2019年09月19日 10:31:30   转载 作者:山村码农  
今天小编就为大家分享一篇解决layui数据表格排序图标被超出的表头挤出去的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如果表头过长,会出现超出显示三个省略号,然后把排序图标挤出去,看不到了,

效果如下

解决办法就是给图标加定位,过长的时候加上

    .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数据表格排序图标被超出的表头挤出去的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

    微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解

    这篇文章主要介绍了小程序webview组件交互,内联h5页面并网页实现微信支付实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 基于JavaScript实现图片连播和联级菜单实例代码

    基于JavaScript实现图片连播和联级菜单实例代码

    这篇文章主要介绍了基于JavaScript实现图片连播和联级菜单实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-07-07
  • Bootstrap进度条组件知识详解

    Bootstrap进度条组件知识详解

    在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧
    2016-05-05
  • 让Firefox支持event对象实现代码

    让Firefox支持event对象实现代码

    FireFox并没有 window.event ,所以在FireFox下编写事件处理函数是很麻烦的事。如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event
    2009-11-11
  • js contains方法实现代码

    js contains方法实现代码

    IE有许多好用的方法,后来都被其他浏览器抄袭了,比如这个contains方法。如果A元素包含B元素,则返回true,否则false。唯一不支持这个方法的是IE的死对头firefox。
    2011-01-01
  • 深入了解JavaScript 的 WebAssembly

    深入了解JavaScript 的 WebAssembly

    这篇文章主要介绍了深入了解JavaScript 的 WebAssembly,它是由 Google , Microsoft , Mozilla , Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目。 ,需要的朋友可以参考下
    2019-06-06
  • JavaScript调试之console.log调试的一个小技巧分享

    JavaScript调试之console.log调试的一个小技巧分享

    日常开发中经常会需要console来查看当前对象的值。当然用debugger会更全面的查看,但是总有只喜欢用console的,比如我。下面这篇文章主要给大家分享了关于JavaScript调试之console.log调试的一个小技巧,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • 深入理解JSON数据源格式

    深入理解JSON数据源格式

    JSON 在很多场合下作为数据格式比XML要更加方便。JSON的数据由对象、数组和元素等格式组成。每种格式都可以包含合法的JavaScript数据类型
    2014-01-01
  • 简单了解微信小程序 e.target与e.currentTarget的不同

    简单了解微信小程序 e.target与e.currentTarget的不同

    这篇文章主要介绍了微信小程序 e.target与e.currentTarget的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 学习javascript面向对象 理解javascript对象

    学习javascript面向对象 理解javascript对象

    这篇文章主要介绍了javascript对象,学习javascript面向对象,感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论