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. MongoDB学习(三)

    MongoDB条件操作符 $gt  > 大于 $lt   < 小于 $gte >= 大于等于 $lte  <= 小于等于 $ne  !=  不等于 条件操作符可用于查询语句中, ...

  2. 《PostgreSQL服务器编程》一一1.3 超越简单函数

    本节书摘来自华章计算机<PostgreSQL服务器编程>一书中的第1章,第1.3节,作者:(美)Hannu Krosing, Jim Mlodgenski, Kirk Roybal 著,更 ...

  3. PHP 面试题总结

    1.获取数组最后一个位置的值 比较常规的是:$arr[count($arr)-1]; 貌似还有一个数组函数end();可以直接获取最后一个元素的值.相应的还有reset(),next(),curren ...

  4. 02-线性结构3 Reversing Linked List

    02-线性结构3 Reversing Linked List   (25分) 时间限制:400ms 内存限制:64MB 代码长度限制:16kB 判题程序:系统默认 作者:陈越 单位:浙江大学 http ...

  5. C#模板编程(2): 编写C#预处理器,让模板来的再自然一点

    在<C#模板编程(1):有了泛型,为什么还需要模板?>文中,指出了C#泛型的局限性,为了突破这个局限性,我们需要模板编程.但是,C#语法以及IDE均不支持C#模板编程,怎么办呢?自己动手, ...

  6. Process Synchronization-Example 1

    问题描述 把学生和监考老师都看作进程,学生有N人,教师1人.考场门口每次只能进出一个人,进考场原则是先来先进.当N个学生都进入考场后,教师才能发卷子.学生交卷后可以离开考场,教师要等收上来全部卷子并封 ...

  7. CF--思维练习--CodeForces - 219C Color Stripe (思维)

    ACM思维题训练集合 A colored stripe is represented by a horizontal row of n square cells, each cell is paine ...

  8. Jmeter 数据库测试参数化

    1.JDBC Request 参数化 方法一.Jmeter 参数化,在 sql query 中使用变量 Jmeter 参数化,使用 csv 参数化 sql query 中使用 ${变量名} 引用 方法 ...

  9. P1790 矩形分割(隐含的电风扇)

    描述:https://www.luogu.com.cn/problem/P1790 有一个长为a,宽为b的矩形(1≤a≤6,2≤b≤6).可以把这个矩形看作是a*b个小方格. 我们现在接到了这样的一个 ...

  10. python 读hdf4文件,再转写成一个tif文件

    1.安装pyhdf包 (1)通过此链接查找并下载pyhdf包:https://www.lfd.uci.edu/~gohlke/pythonlibs/#pygame(根据自己的系统及python版本选择 ...