jqGrid冻结列错行问题,将冻结表格(悬浮表格)与 正常表格进行高度同步

在使用jqGrid时,如果你遇到了冻结列(也称为冻结表格或悬浮表格)与正常表格高度不同步的问题,这通常是由于CSS样式或者布局管理不当所导致的。下面是一些解决此问题的步骤和建议: 1. 确保CSS样式正确 首先,确保你的CSS样式正确地应用于冻结列和非冻结列。特别是height和overflow属性,它们对于同步滚动和高度非常重要。

复制代码
/* 确保表格容器有正确的高度和溢出处理 */
.ui-jqgrid-bdiv {
    overflow-y: auto;
}
 
/* 确保冻结列的容器也有正确的高度和溢出处理 */
.frozen-div {
    overflow-y: hidden;
    overflow-x: hidden;
}
  1. 使用height属性同步高度 在初始化jqGrid时,确保为表格容器和冻结列容器设置了正确的height属性。你可以通过height选项或者在初始化后使用JavaScript来设置。

    $("#yourGridId").jqGrid({
    // 其他选项...
    height: '100%', // 或者具体像素值,例如 '300px'
    // 冻结列选项
    frozenColumns: true,
    // 其他冻结列选项...
    });

  2. 动态调整高度 如果你在页面加载后动态改变了内容(例如通过AJAX加载数据),你可能需要手动调整jqGrid的高度。

    $("#yourGridId").jqGrid('setGridHeight', '100%'); // 或者具体像素值,例如 '300px'

  3. 检查外部CSS影响 有时候,外部CSS可能会影响到jqGrid的布局,特别是当使用了如Bootstrap等框架时。确保没有外部CSS覆盖了jqGrid的默认样式。检查是否有.ui-jqgrid-bdiv或.frozen-div类的样式被不正确地覆盖。

  4. 使用resizeStop事件处理高度调整 如果你使用的是可调整大小的表格(例如在窗口调整大小时),可以使用resizeStop事件来重新设置高度。

    (window).resize(function () { setTimeout(function(){ ("#yourGridId").jqGrid('setGridHeight', '100%'); // 或者具体像素值,例如 '300px'
    }, 100); // 使用延迟以确保窗口大小已完全改变
    });

  5. 检查JavaScript错误和冲突 确保没有JavaScript错误干扰了jqGrid的正常工作。打开浏览器的开发者工具,查看控制台是否有错误信息。此外,检查是否有其他JavaScript库或插件与jqGrid冲突。 通过上述步骤,你应该能够解决冻结列与正常表格高度不同步的问题。如果问题仍然存在,可能需要更详细地检查具体的实现代码或提供更多的错误信息来进一步诊断问题

    function resetTableHeight(tableId) {
    // 修改后单个表格高度
    jQuery(tableId + ' tr').slice(1).each( function (index, element) {
    jQuery(element).css('height', '')
    const id = jQuery(element).attr('id')
    if (!id) return
    // 是否有冻结表格
    if (jQuery(tableId + '_frozen tr' ).eq(id).length > 0) {
    // 获取任意一边的高度
    const height = jQuery(element).outerHeight(true)
    // 进行双向同步高度
    jQuery(element).css('height', height)
    // 判断是否是最后一个
    if (jQuery(tableId + ' tr').slice(1).length > 7 && index+1 == jQuery(tableId + ' tr').slice(1).length) {
    // TODO:有些表格最后结尾的高度可能会出现一像素的差距所以 最后一个表格高出一像素 抵消底边框多余高度
    jQuery(tableId + '_frozen tr' ).eq(id).css('height', height + 1)
    } else {
    // 进行双向同步高度
    jQuery(tableId + '_frozen tr' ).eq(id).css('height', height)
    }
    }
    })
    }

相关推荐
心.c12 分钟前
JavaScript单线程实现异步
开发语言·前端·javascript·ecmascript
爱分享的程序员19 分钟前
前端面试专栏-前沿技术:31.Serverless与云原生开发
前端·javascript·面试
姜 萌@cnblogs1 小时前
Saga Reader 0.9.9 版本亮点:深入解析核心新功能实现
前端·ai·rust
gnip1 小时前
实现elementplus官网主题切换特效
前端·css
Darling02zjh1 小时前
HTML5
前端·html·html5
成长ing121382 小时前
闪白效果
前端·cocos creator
Lazy_zheng2 小时前
React架构深度解析:从 Stack 到 Fiber,解决 CPU 和 I/O 瓶颈问题
前端·react.js·前端框架
张元清2 小时前
什么是React并发模式中的Tearing(撕裂)
前端·面试
AndyLaw2 小时前
统计字符数错一半,我被 length 坑了两次
前端·javascript
关羽的小刀2 小时前
Element-UI最新版暗藏Lodash漏洞?一次真实项目安全排查记录
前端