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

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

/* 确保表格容器有正确的高度和溢出处理 */
.ui-jqgrid-bdiv {
    overflow-y: auto;
}
 
/* 确保冻结列的容器也有正确的高度和溢出处理 */
.frozen-div {
    overflow-y: hidden;
    overflow-x: hidden;
}

2. 使用height属性同步高度 在初始化jqGrid时,确保为表格容器和冻结列容器设置了正确的height属性。你可以通过height选项或者在初始化后使用JavaScript来设置。

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

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

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

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

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

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

6. 检查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)
            }
        }
    })
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海天胜景

您的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值