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


Posted in Javascript onSeptember 19, 2019

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

效果如下

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

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

解决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数据表格排序图标被超出的表头挤出去的问题

以上这篇解决layui数据表格排序图标被超出的表头挤出去的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
微信小程序3D轮播实现代码
Sep 19 #Javascript
layui 实现表格某一列显示图标
Sep 19 #Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 #Javascript
layui按条件隐藏表格列的实例
Sep 19 #Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 #Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 #Javascript
iview form清除校验状态的实现
Sep 19 #Javascript
You might like
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
javascript几个易错点记录
2014/11/26 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
Python函数嵌套实例
2014/09/23 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
python实现logistic分类算法代码
2020/02/28 Python
Python用户自定义异常的实现
2020/12/25 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
留学自荐信
2013/10/10 职场文书
饭店工作计划书
2014/01/10 职场文书
寒假实习自荐信
2014/01/26 职场文书
服务承诺书
2015/01/19 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
事业单位岗位说明书
2015/10/08 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
HttpClient实现表单提交上传文件
2022/08/14 Java/Android