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. 带权并查集--hdu3047 ZJnu stadium

    题意:给出一个n,m,n表示的是有n 个人,m表示的是 有m 对关系: 接下来输入的就是这m对关系,a,b,x:表示的是a,b相距x个距离:然后判断输入的是否与这个数的上面的数信息一致, 输出不一致的 ...

  2. Entity framework 加载多层相关实体数据

    Entity framework有3种加载数据的方式:懒汉式(Lazy loading),饿汉式(Eager loading),显示加载(Explicit loading).3种加载方式有各自的优缺点 ...

  3. MySQL导出数据到文件中的方法

    MySQL导出数据到文件中的方法 1.导出数据到txt文件中实例:把数据表studscoreinfo中所有数据导出到指定的位置方法:select * from 表名 into outfile 指定导出 ...

  4. zabbix监控nginx日志状态码

    监控需求 监控Nginx常见的状态码并对其进行监控,对常见的错误状态码创建相对应的触发器以下按照分钟对数据进行抓取 Zabbix_Agentd创建监控脚本 1)创建脚本之前核对Nginx日志格式我这里 ...

  5. Dynamics 9.0 安装好后 公告出现 提示:出现错误。 请稍等片刻,然后重试。 如果问题仍然存在,请与管理员联系。

    此问题为系统的Bug,示例图如下: 解决方案为修改存储过程 p_RetrievePosts,将startDate参数的默认值改成 1900-01-01,endDate参数的默认值改成 9999-12- ...

  6. Linux高性能服务器技术总结

    文章目录 1 服务器简介 2 I/O复用技术 2.1 循环方式 2.2 select 方式 2.3 poll方式 2.4 epoll 方式 3 多线程方式 4 CPU多核并行计算 5 深度分析内核性能 ...

  7. Android 电池管理系统架构总结 Android power and battery management architecture summaries

    文章目录 1 整体架构 2 设计构架 2.1 driver 2.1.1 Charger.ko 2.1.2 Battery.ko 2.2 power supply 2.2.1 基础架构 2.2.2 代码 ...

  8. [hdu5249]动态中位数

    题意:3种操作分别为入队,出队,查询当前队列的中位数.操作数为1e5数量级. 思路:先考虑离线算法,可以离散+线段树,可以划分树,考虑在线算法,则有treap名次树,SBtree(size balan ...

  9. AXI总线slave模式下接收数据---verilog代码

    AXI总线slave模式下接收数据---verilog代码 `timescale 1ns / 1ps ///////////////////////////////////////////////// ...

  10. Android 编译系统

    1,Makefile编译方式 TARGET: PREREQUISITES COMMANDS 1,TARGET是需要生成的目标文件,PREREQUISTIES代表了目标所依赖的所有文件. 2,简单的Ma ...