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)
    }
    }
    })
    }

相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全9 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试