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

赞 (0)

相关推荐

  • layui表格内容溢出的解决方法

    引言,我做文章管理的时候,引入的是layui的表格样式,但是里面的内容溢出无法隐藏,后来我采用了往td里面加了个<div></div> 然后设置一下样式就可以了. <table class="layui-table"> <colgroup> <col width="100"> <col width="150"> <col> </colgroup> &l

  • 解决layui表格的表头不滚动的问题

    步奏: 1.设置两个table,第一个table有thead没有tbody,第二个table有tbody没有table: 2.第二个table需要一个div包住,并设置宽高,可用绝对布局 3.tr下的th和td需要设置相同的宽度 实例: html: <html> <head></head> <body> <div id="righttable" style="width:100%;height:70%;padding-bo

  • 解决layui表格内文本超出隐藏的问题

    只需要更改样式即可 图片: 代码如下 .layui-table-cell{ height:auto; overflow:visible; text-overflow:inherit; 以上这篇解决layui表格内文本超出隐藏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui问题之渲染数据表格时,仅出现10条数据的解决方法

    一.问题 ajax获取服务端数据之后,要动态渲染table,但数据仅仅数显了10条,并没有渲染所有的数据. 二.经过 看一下表格需要的数据,0-9条的数据都自动有一个名为LAY_TABLE_INDEX的键值对,但10条及之后的数据都没有这个键值对. 很是纳闷,这个表格不带分页功能,应该不需要写limit对数据进行限制 table.render({ elem: '#orderTable' ,height: 400 ,cols: [[ //标题栏 {field: 'status', title: "

  • 解决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()); //

  • 解决layui数据表格table的横向滚动条显示问题

    加上这段样式代码就可以解决了: <link type="text/css" rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" /> <style> body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ </style> ps:这个问题fly社区给出的解释是:table 列

  • 解决layui数据表格Date日期格式的回显Object的问题

    有属性: private Date createtime; 但是回显的时候,显示{ Object object },想要转换成字符串格式显示. layui中显示: 在对应的实体类中添加属性:private String createtimestr; 然后添加对应的set/get方法,但是方法处理的是createtime 但是在Mybatis-plus框架映射时,数据库表里面又没有该字段,获取数据的时候会报异常,unknown field "createtimestr" in table

  • 解决LayUI数据表格复选框不居中显示的问题

    解决LayUI数据表格复选框不居中显示的问题 最后在样式文件中增加如下代码: .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 完美解决: 以上这篇解决LayUI数据表格复选框不居中显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决Layui数据表格的宽高问题

    在使用Layui数据表格的时候,如果采用固定数值的话,在不同浏览器里显示会有差异,特别是在不同分辨率设备上.针对以此,把width设置直接去掉,貌似解决了我的显示问题. 之前固定宽高的情况 /*-------table----------------*/ //方法级渲染 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '<%=path%>/content/getWd

  • 解决Layui数据表格中checkbox位置不居中的方法

    1.情景 使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 2.解决办法 通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 以上这篇解决Layui数据表格中checkbox位置不居中的方法就是小编分享给大家的全部内容了,

  • layui数据表格 table.render 报错的解决方法

    一.报错信息 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Wed Jan 23 15:20:18 CST 2019 There was an unexpected error (type=Internal Server Error, status=500). An error happened during temp

  • 解决Layui数据表格显示无数据提示的问题

    做项目中,没有数据时候表格中提示 无数据,感觉更友好,有时候没有数据但是确实空白,没有显示 无数据 文本提示,很纳闷,就尝试找了下看是什么问题 后来发现,是开启了字段排序功能,删除排序功能代码就能正常显示 无数据 提示文本了,这应该是Layui一个小小的bug吧,排序代码: initSort: { field: 'createDatetime' //排序字段,对应 cols 设定的各字段名 , type: 'desc' //排序方式 asc: 升序.desc: 降序.null: 默认排序 },

  • Layui数据表格 前后端json数据接收的方法

    先上效果图: 前端数据表格: <div class="x-body"> <%-- 数据表格 --%> <table class="layui-table" lay-data="{ id:'test', url:'/menu/page', page:true, limits: [10,20,50], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90] limit: 10, //每页默认显示的数量

  • 对layui数据表格动态cols(字段)动态变化详解

    如搜索查询时,常会遇到按日期时间段查询,并显示查询的每个日期的数据,后台拼装数据此处不讨论. 把表格渲染封装在函数里面,cols_arr是传入的字段数组 function tableRender(cols_arr){ table.render({ elem: '#demo' , url: 请求地址 //数据接口 , method: 'post' , page: true //开启分页 , cols: cols_arr , id: 'demo' , limit: 10 , limits: [10,

随机推荐