layui数据表格增加自动换行后，拖动列宽固定列错乱变形

问题：表格内容增加了自动换行功能，当行高发生改变时发现右侧固定列行高不匹配。

原因：layui用定位把固定列定位在了右边，这样就会产生一个新的table，在继承高度的时候发生了错乱

解决思路：当拖动列宽的时候循环中间的表格所有tr的高度给右边表格tr依次赋值

这里我写了一个鼠标按下和释放的方法来监听拖动

// 该方法用于解决固定列行高错位问题var x,y;$(document).mousedown(function(event){ //获取鼠标按下的位置x = event.pageX;y = event.pageY;});$(document).mouseup(function(event){//鼠标释放var newX = event.pageX;var newY = event.pageY;if(x==newX && y==newY){//位置相同的操作}else{//表格内容高度重渲染//我这里只有右边有 固定列 左边是没有的，如果左右都有请自己查看元素 使用eq()选择器选择//正确的 tr数组$(".layui-table-body  tr").each(function (index, val) {$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());//表头高度重渲染});//这里 .layui-table-header 第二个元素是固定列 第一个是需要获取的$(".layui-table-header").eq(1).find("tr").eq(0).height($(".layui-table-header").eq(0).find("tr").eq(0).height());}})

如果你的列表里有排序 sort ，需要添加一个sort监听事件

table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter //表格内容高度重渲染$(".layui-table-body  tr").each(function (index, val) {$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());//表头高度重渲染});$(".layui-table-header").eq(1).find("tr").eq(0).height($(".layui-table-header").eq(0).find("tr").eq(0).height());});

layui数据表格增加自动换行后，拖动列宽固定列错乱变形相关推荐

layui数据表格增加序号列（第二页从1开始 or 接上一页序号开始）
layui数据表格增加序号列: 一.分页模式下第二页从1开始 1.在table.render()方法中,加 {title: '序号', align: "center",temple ...
Layui数据表格中使用模板引擎
1.layui对数据表格中某一列做处理时,比如时间格式化: 图中d.ghrq,d就是当前行数据: 2.layui数据表格工具条按钮需要通过某一列的值去判断是否显示这个按钮效果: 也可以使用layui ...
layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上，鼠标悬浮，显示所有文字内容（修改源码）...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
解决Layui数据表格无数据最后列被顶出去的问题
解决Layui数据表格无数据最后列被顶出去的问题参考文章: (1)解决Layui数据表格无数据最后列被顶出去的问题 (2)https://www.cnblogs.com/Caoxdong/p/963 ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
Layui数据表格的引用
对于一些编程插件的引用,相信大多数的编程人员都不会感觉到陌生,因为在对程序开发和项目开发的过程中往往都会需要引用到插件,那么至于插件呢,也有很多种,比如: bootstrap jquery layui ...
layui数据表格中包含图片的处理方式
layui数据表格中包含图片时,图片可能显示不全. 搜索后网上的解决方法: <style>.layui-table-cell {height: 100%;max-width: 100%;} ...
5. Layui数据表格的快速使用
飘向天边,我们慢慢明白,有些告别,就是最后一面.--<云边有个小卖部> Layui数据表格的快速使用 1.什么是数据表格 2.方法渲染 3.自动渲染 4.把静态表格转换为动态 1.什么是数 ...
Thinkphp+layui数据表格实现表格分页
项目场景:Thinkphp+layui数据表格实现表格分页提示:thinkphp+layui数据表格分页,需要服务器端配合.之前在百度上一通乱搜也没找到解决方案. 问题描述提示:这里描述项目中遇到 ...

layui数据表格增加自动换行后，拖动列宽固定列错乱变形

问题：表格内容增加了自动换行功能，当行高发生改变时发现右侧固定列行高不匹配。

原因：layui用定位把固定列定位在了右边，这样就会产生一个新的table，在继承高度的时候发生了错乱

解决思路：当拖动列宽的时候循环中间的表格所有tr的高度给右边表格tr依次赋值

这里我写了一个鼠标按下和释放的方法来监听拖动

如果你的列表里有排序 sort ，需要添加一个sort监听事件

layui数据表格增加自动换行后，拖动列宽固定列错乱变形相关推荐

最新文章

热门文章