1、问题描述:使用layui的table数据表格,固定某一列,这样表格中数据的宽度超出屏幕宽度时,固定列可以一直显示在屏幕中,不会随着底部滚动栏左右的拖动而变化位置。但是遇到一个问题,就是固定列的行高和其他非固定列的行高不一致,效果如下:

2、解决办法:在table的回调函数done中去处理,代码如下:

var tableIn = table.render({
elem: '#order-list',
url: '{:url("orderList")}',
method: 'post',
title: '{:lang("admin")}{:lang("orderList")}',
cols: [[
{field: 'city', title: '城市', minWidth: 130},
{field: 'order_sn', title: '订单编号', minWidth: 180},
]],
page: true,
done: function (res, curr, count) {
// 该方法用于解决,使用fixed固定列后,行高和其他列不一致的问题
$(".layui-table-main tr").each(function (index ,val) {
$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
});
}
});

3、修改好,刷新页面,效果如下:

4、大功告成!

layui table 数据表格固定列的行高和table其他列的行高不一致的更多相关文章

  1. LayUI之table数据表格获取行、行高亮等相关操作

    前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...

  2. layui table 数据表格 隐藏列

    现在国内的模板,也就layui一家独大了,其中的数据表格功能强大,但我不会用python或者django拼接json,输出发送给数据表格,那只好用笨办法,循环遍历吧. 数据表格中保留id列,是为了编辑 ...

  3. layui table数据表格reload where参数保留问题

    layui table数据表格reload where参数保留问题 在使用layui过程中多多少少会遇到些问题 table reload 有个坑:reload时where参数会保留上次的参数,如果用 ...

  4. layui:数据表格如何合并单元格

    layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...

  5. layui动态数据表格-分页

    数据结构 $list = [ [,'], [,] ]; $json[; $json['; $json[; $json['data'] = $list; return json($json); 代码: ...

  6. layui的数据表格加上操作

    数据表格加上操作. <script type="text/html" id="barDemo"> <a class="layui-b ...

  7. table数据表格添加checkbox进行数据进行两个表格左右移动。

    <table class="table table-hover table-striped table-condensed newDateList"> <thea ...

  8. layui数据表格固定头部和第一列、colspan合并列

    刚看到原型图的时候,纳尼?不是跟我开玩笑吧,小女子资历尚浅,还真没做过像这样的功能,然后就是各种找度娘,可是都没有找到合适的,很多都是行合并,真的是头疼呀!再纠结是用VUE实现还是用layui实现好, ...

  9. layui中,同一个页面动态加载table数据表格

    效果图: 前端代码: <div class="layui-fluid" id="record-user" hidden="hidden" ...

随机推荐

  1. 从蓝瘦“想哭”到 SELinux 看操作系统安全何在

    最近一周,来自网络的"想哭"勒索病毒(Wannacry Ransomware)在世界各地同时上演了一部绑匪大片,台词华丽,演技出色,当仁不让地新晋世界第一网红.全球各国除了默默忙于 ...

  2. TCP连接过程及报文解析

    可能大家都听过TCP建立连接时需要经历三次握手和四次挥手的. 那么具体的握手挥手的过程是怎么样的呢? 这篇文章就通过WireShark抓包来了解TCP连接建立和断开的过程. 实验方法: 写一段简单的代 ...

  3. nginx日志、nginx日志切割、静态文件不记录日志和过期时间

    2019独角兽企业重金招聘Python工程师标准>>> 12.10 Nginx访问日志 日志格式 vim /usr/local/nginx/conf/nginx.conf //搜索l ...

  4. 手把手教你用Node.js爬虫爬取网站数据

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前请先确保自己安装了Node.js环境,还没有安装的的童鞋请自行百度 ...

  5. nodeJS中express框架设置全局跨域请求头

    //设置跨域请求头 router.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin&qu ...

  6. 从零搭建Prometheus监控报警系统

    什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB).Prometheus使用Go语言开发,是Google BorgMon监控系统 ...

  7. 数学--数论--HDU 6063 RXD and math (跟莫比乌斯没有半毛钱关系的打表)

    RXD is a good mathematician. One day he wants to calculate: output the answer module 109+7. p1,p2,p3 ...

  8. 图论--最短路--第K短路(IDA*)(IDA Star)模板

    #include <iostream> #include <cstdio> #include <cstring> #include <queue> us ...

  9. win7乱码问题解决方法(cmd变小,plsql客户端乱码)

    1.点击控制面板:时钟.语言和区域:区域和语言:管理点击更改系统区域设置,选中英语(英国):重启 2.点击控制面板:时钟.语言和区域:区域和语言:管理点击更改系统区域设置,选中中文(简体,中国):重启 ...

  10. 题目分享T

    题意:蛐蛐国里现在共有n只蚯蚓(n为正整数).每只蚯蚓拥有长度,我们设第i只蚯蚓的长度为a_i(i=1,2,...,n),并保证所有的长度都是非负整数(即:可 能存在长度为0的蚯蚓).每一秒,神刀手会 ...