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. PHP版DES算法加密数据(3DES)另附openssl_encrypt版本

    PHP版DES算法加密数据(3DES) 可与java的DES(DESede/CBC/PKCS5Padding)加密方式兼容 <?php /** * Created by PhpStorm. * ...

  2. CodeForces - 1047CEnlarge GCD(这题很难,快来看题解,超级详细,骗浏览量)

    C. Enlarge GCD time limit per test1 second memory limit per test256 megabytes inputstandard input ou ...

  3. python 中open文件路径的选择

    一.问题描述 python 中使用open打开某个文件写入时,往往会发现需要写入的文件不在同级目录下.这样就需要根据文件的路径来找到并打开. 但往往有时绝对路径和相对路径,写入不正确就会打开失败. 二 ...

  4. shell之路 shell核心语法【第四篇】流程控制

    if语句 if ... fi 语句: if ... else ... fi 语句: if ... elif ... else ... fi 语句. 注意: expression 和方括号([ ])之间 ...

  5. 【UEFI】---史上最全的X86平台启动流程分析(软硬结合)

    最近研究了下X86处理器的启动流程分析,相比于常见的ARM来说,X86平台启动流程真的复杂了很多,本次基于项目实际的两个问题入手,研究了包括以下几个部分的内容: 1. 从硬件角度看启动流程 2. 从软 ...

  6. dp D. Caesar's Legions

    https://codeforces.com/problemset/problem/118/D 这个题目有点思路,转移方程写错了. 这个题目看到数据范围之后发现很好dp, dp[i][j][k1][k ...

  7. Spring Cloud学习 之 Spring Cloud Ribbon 重试机制及超时设置不生效

    今天测了一下Ribbon的重试跟超时机制,发现进行的全局超时配置一直不生效,配置如下: ribbon: #单位ms,请求连接的超时时间,默认1000 ConnectTimeout: 500 #单位ms ...

  8. 报错:Maven创建An internal error occurred during: "Retrieving archetypes:". Java heap space

    在Eclipse中创建Maven的Web项目时出现错误:An internal error occurred during: "Retrieving archetypes:". J ...

  9. .Net Core WPF之XAML概述

    原文链接,机器翻译,有误处参看原文. XAML overview in WPF 2019/08/08 What is XAML XAML syntax in brief Case and white ...

  10. Json格式数据的解析

    JSON是一种轻量级的数据交换格式,我们在编程中遇到的JSON数据通常就是一串字符串,只不过按照特定的格式去书写,这样当你把JSON数据传输给别人的时候对方只要使用这种特定的规则去阅读解析你的数据即可 ...