layui table中固定表头,弹框缩放之后,表头对不齐问题

问题描述:

在弹框中的表格,表格设置height属性

如果表格数据太多,表头会固定,只有表内容会滚动

拖动弹框右下角缩放弹框时,表格的头部对不齐

正常显示如图:

缩放之后如图:

解决办法:

layer有一个resizing属性,是弹框缩放结束的回调放方法

在回调之后重新根据数据列设置表头的宽度。

resizing: function (layero) {
    var tableDom = layero.find(‘.layui-table-box‘);
    var theadTable = tableDom.find(‘.layui-table-header‘);
    var tbodyTable = tableDom.find(‘.layui-table-body‘);
    tbodyTable.css({
        ‘overflow‘: ‘auto‘
    });
    theadTable.css(‘width‘, ‘auto‘);
    theadTable.find(‘table‘).css(‘width‘, ‘auto‘);
    var tbodyTrTable = tbodyTable.find(‘tr‘).eq(0);
    if (tbodyTrTable.length != 0) {
        theadTable.find(‘th‘).each(function (i) {
            var tdDom = tbodyTrTable.find(‘td‘).eq(i);
            $(this).css({
                ‘width‘: tdDom.outerWidth(true) + ‘px‘
            });
        });
    } else {
        theadTable.find(‘table‘).css(‘width‘, ‘100%‘);
    }
    tableDom.find(‘.layui-form‘).css(‘height‘, tbodyTable.outerHeight(true) + theadTable.outerHeight(true) + ‘px‘);
 }

原文地址:https://www.cnblogs.com/kcat/p/10825110.html

时间: 2024-10-09 08:31:43

layui table中固定表头,弹框缩放之后,表头对不齐问题的相关文章

layui table中使用checkbox

第一步: 1. <div class="layui-form"> <table class="layui-hide" lay-filter="js_table_reource_invite_supplier_index_table" id="js_table_reource_invite_supplier_index_table"></table> </div> 2.渲染表格 t

在vue中引入layer弹框的简易方法

npm i --save layui-layer 2.在main.js中引入 import layer from "layui-layer"; 3.然后就可以在各个组件中使用layer了 实例: layer.confirm('您是如何看待前端开发?', { btn: ['重要','奇葩'] //按钮 }, function(){ layer.msg('的确很重要', {icon: 1}); }, function(){ layer.msg('也可以这样', { time: 20000,

实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中

上图是实现效果. 下面贴代码 表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果. <th> <input id="allboxs" onclick="allcheck()" type="checkbox"/> </th> td中的代码 <td> <input name="boxs" type="checkbox"/

table中列复选框全选,再选 效果

<table class="table table-striped sortable table-bordered table-hover " id="zdnews"> <thead> <tr> <th>运单号</th> <th>发货人</th> <th>收货人</th> <th>货物信息</th> <th id="pa

layui table中添加一列序号列

页面文件在相应的位置上添加下面两个模块的代码: 第一模块:在render table 时添加: { field: 'rank', title: '序号', width: 80, sort: true, fixed: 'left', templet: '#rank' } 第二模块:在<script></script>一对标签外面添加: <script type="text/html" id="rank"> {{d.LAY_TABLE

table中添加下拉框

1 { 2 file: 'usename', 3 title: '下发用户', 4 width:"20%", 5 align: 'center', 6 templet: function (d) { 7 var test = '<select style="border:solid 1px #009688;color:#009688; width:82px; border-radius:5px;padding-left:15px;" lay-ignore cl

Android原生代码拦截H5 Web页面中JavaScript弹窗/弹框

<html> <body> <script> function showAlert(){ alert("JavaScript - hello , world !"); } function showConfirm(){ confirm("访问 https://blog.csdn.net/zhangphil"); } function showPrompt(){ var string=prompt("请输入用户名"

Angular中sweetalert弹框的使用详解

最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了.所以我就想办法将sweetalert用到项目中,在项目中引入sweetalert时,遇到诸多问题,但最终在我不懈坚持下,都解决了,实现了效果.具体用法请看下文.写的有问题的地方欢迎留言,我会及时更改. 一.下载文件 npm install angular-sweetalert npm install sweetalert 当npm 下载angular-sweetaler

jQuery+SpringMVC中的复选框选择与传值

一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked");$("#cb1").attr("checked",true); 对应的jQuery函数,主要完成三个功能: 1.第一个复选框选中或取消选中,则下面的复选框为全选或取消全选: 2.当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个没