Jquery 冻结柱固定排高jqgrid 4.6

我正在尝试使用article修复JQGrid冻结列的行高。我已经试着让它工作了几天了。我在一定程度上成功地正确加载了网格，但在重新调整列标题的大小时仍然存在问题

我对原始代码所做的唯一修改是向fixPositionsOfFrozenDivs函数添加以下条件

if（this.grid！==未定义）{ }

重现问题的步骤：

加载网格

尽量减少列标题的宽度，以便重新调整冻结列的高度

以下是我的代码：

$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;

//<![CDATA[
/*global $ */
/*jslint browser: true, nomen: true */
$(document).ready(function () {
    var budgetType = $('#IntBudgetType').val();
    var budgetExportJQGridDefaults = {
        colNames: ['Item Control No', 'Budget Revision'],
        shrinkToFit: false,
        colModel: [
            {
                name: 'ItemCode', index: 'ItemCode', search: true, width: 190, cellattr: makeCellContentWrap, frozen: true, searchoptions: {
                    sopt: jqGridSearchOperationsFor.String,
                },
                searchrules: jqGridSearchRulesFor.DefaultMandatory
            },
            {
                name: 'BudgetRevision', index: 'BudgetRevision', search: true, width: 120, searchtype: 'number', cellattr: makeCellContentWrap, searchoptions: {
                    sopt: jqGridSearchOperationsFor.Number
                },
                searchrules: jqGridSearchRulesFor.PositiveIntMandatory
            },
        ],
        pager: '#BudgetExportGridPager',
        rowNum: paramFromView.PageSize,
        sortname: paramFromView.SortName,
        sortorder: paramFromView.SortOrder,
        url: paramFromView.Url,
        afterInsertRow: afterInsert,
        loadComplete: function () {
            fixPositionsOfFrozenDivs.call(this);
        }

    };
    //Add filter only if it's available (an attempt to fire searchrules validations when loading)
    if (paramFromView.hasFilter) {
        budgetExportJQGridDefaults = $.extend({}, budgetExportJQGridDefaults, {
            postData: {
                filters: paramFromView.filterStr
            },
            search: paramFromView.hasFilter
        })
    }
    var budgetExportJQGridSearchDefaults = {

    };

    budgetExportJQGridDefaults = $.extend({}, jqGridAppDefaults, budgetExportJQGridDefaults);
    budgetExportJQGridSearchDefaults = $.extend({}, jqGridSearchDefauls, budgetExportJQGridSearchDefaults);

    $('#BudgetExportGrid').jqGrid(budgetExportJQGridDefaults).navGrid('#BudgetExportGridPager', jqGridNavGridDefaultParameters,
    {},
    {},
    {},
    budgetExportJQGridSearchDefaults);

    $("#BudgetExportGrid").jqGrid('setFrozenColumns');

    function ResizeGridAfterScreenResize() {
        $('#BudgetExportGrid').jqGrid('setGridWidth', $('#BudgetExportGrid').parents('.main-content').width() - 2);
    }
    function afterInsert(rowid, rowdata) {
        var val = $(this).jqGrid('getCell', rowid, 'Error');;
        if (val != '') {
            $(this).jqGrid('setRowData', rowid, false, 'ui-state-error');
        }

    }

    $(window).resize(function () {
        clearTimeout(this.id);
        this.id = setTimeout(function () {
            ResizeGridAfterScreenResize();
        }, 300);
    });

    //fire 1st time when page has loaded
    ResizeGridAfterScreenResize();

    //});


    'use strict';
    $grid = $("#list"),
    resizeColumnHeader = function () {
        var rowHight, resizeSpanHeight,
            // get the header row which contains
            headerRow = $(this).closest("div.ui-jqgrid-view")
                .find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");

        // reset column height
        headerRow.find("span.ui-jqgrid-resize").each(function () {
            this.style.height = '';
        });

        // increase the height of the resizing span
        resizeSpanHeight = 'height: ' + headerRow.height() + 'px !important; cursor: col-resize;';
        headerRow.find("span.ui-jqgrid-resize").each(function () {
            this.style.cssText = resizeSpanHeight;
        });

        // set position of the dive with the column header text to the middle
        rowHight = headerRow.height();
        headerRow.find("div.ui-jqgrid-sortable").each(function () {
            var $div = $(this);
            $div.css('top', (rowHight - $div.outerHeight()) / 2 + 'px');
        });
    },
    fixPositionsOfFrozenDivs = function () {
        var $rows;
        if (this.grid !== undefined) {
            if (this.grid.fbDiv !== undefined) {
                $rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
                $('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
                    var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                    if ($(this).hasClass("jqgrow")) {
                        $(this).height(rowHight);
                        rowHightFrozen = $(this).height();
                        if (rowHight !== rowHightFrozen) {
                            $(this).height(rowHight + (rowHight - rowHightFrozen));
                        }
                    }
                });
                $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
                $(this.grid.fbDiv).css($(this.grid.bDiv).position());
            }

            if (this.grid.fhDiv !== undefined) {
                $rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
                $('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
                    var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                    $(this).height(rowHight);
                    rowHightFrozen = $(this).height();
                    if (rowHight !== rowHightFrozen) {
                        $(this).height(rowHight + (rowHight - rowHightFrozen));
                    }
                });
                $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
                $(this.grid.fhDiv).css($(this.grid.hDiv).position());
            }
        }
    },
    fixGboxHeight = function () {
        var gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight(),
            pagerHeight = $(this.p.pager).outerHeight();

        $("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
        gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight();
        pagerHeight = $(this.p.pager).outerHeight();
        $("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
    };


    $grid.jqGrid('gridResize', {
        minWidth: 450,
        stop: function () {
            fixPositionsOfFrozenDivs.call(this);
            fixGboxHeight.call(this);
        }
    });
    $grid.bind("jqGridResizeStop", function () {
        resizeColumnHeader.call(this);
        fixPositionsOfFrozenDivs.call(this);
        fixGboxHeight.call(this);
    });
    resizeColumnHeader.call($grid[0]);
    $grid.jqGrid('setFrozenColumns');
    $grid.triggerHandler("jqGridAfterGridComplete");
    fixPositionsOfFrozenDivs.call($grid[0]);
});
//]]>

$.jgrid.no_legacy_api=true；
$.jgrid.useJSON=true；
//div>table.ui jqgrid btable>tbody>tr'，this.grid.bDiv）；
$（'>table.ui jqgrid btable>tbody>tr'，this.grid.fbDiv）.each（函数（i）{
var rowHight=$（$rows[i]）.height（），rowHightFrozen=$（this.height（）；
if（$（this.hasClass（“jqgrow”））{
$（此）.高度（rowHight）；
rowHightFrozen=$（此）.height（）；
如果（rowHight！==rowHightFrozen）{
$（此）.height（rowHight+（rowHight-rowHightFrozen））；
}
}
});
$（this.grid.fbDiv）.height（this.grid.bDiv.clientHeight）；
$（this.grid.fbDiv）.css（$（this.grid.bDiv.position（））；
}
if（this.grid.fhDiv！==未定义）{
$rows=$（'>div>table.ui jqgrid htable>thead>tr'，this.grid.hDiv）；
$（'>table.ui jqgrid htable>thead>tr'，this.grid.fhDiv）.each（函数（i）{
var rowHight=$（$rows[i]）.height（），rowHightFrozen=$（this.height（）；
$（此）.高度（rowHight）；
rowHightFrozen=$（此）.height（）；
如果（rowHight！==rowHightFrozen）{
$（此）.height（rowHight+（rowHight-rowHightFrozen））；
}
});
$（this.grid.fhDiv）.height（this.grid.hDiv.clientHeight）；
$（this.grid.fhDiv）.css（$（this.grid.hDiv.position（））；
}
}
},
fixGboxHeight=函数（）{
var gviewHeight=$（“#gview_”+$.jgrid.jqID（this.id））.outerHeight（），
pagerHeight=$（this.p.pager.outerHeight（）；
$（“#gbox"”+$.jgrid.jqID（this.id））.height（gviewHeight+pagerHeight）；
gview光照=$（“#gview光照”+$.jgrid.jqID（this.id））.outerHeight（）；
pagerHeight=$（this.p.pager.outerHeight（）；
$（“#gbox"”+$.jgrid.jqID（this.id））.height（gviewHeight+pagerHeight）；
};
$grid.jqGrid（'gridResize'{
最小宽度：450，
停止：函数（）{
fixPositionsOfFrozenDivs.call（this）；
fixGboxHeight.call（this）；
}
});
$grid.bind（“jqGridResizeStop”，函数（）{
resizeColumnHeader.call（此）；
fixPositionsOfFrozenDivs.call（this）；
fixGboxHeight.call（this）；
});
resizeColumnHeader.call（$grid[0]）；
$grid.jqGrid（'setFrozenColumns'）；
$grid.triggerHandler（“jqGridAfterGridComplete”）；
fixPositionsOfFrozenDivs.call（$grid[0]）；
});
//]]>

这是重新调整列标题大小时的显示方式

我做错了什么？

试试看。它也有同样的问题吗？如果您可以在这里重现问题，那么请描述完整的测试用例（如何一步一步重现问题）

---

已更新：您发布的代码似乎是旧代码与我的演示代码的组合。问题存在于行

$grid=$（“#list”）

中。在我的演示中，我将网格与

id=“list”

一起使用，但您将网格与

id=“BudgetExportGrid”

一起使用。因此，

$grid.bind（“jqGridResizeStop”，…）

不起作用。您应该只使用正确的id，并且调整大小的问题应该得到解决。

尝试过，但问题似乎仍然存在。但是，我无法在您的演示网站上复制该问题。问题似乎在于，当重新调整列标题的大小时，第一个div并没有消失。奇怪的是，当我在浏览器上打开开发人员工具时，class=“freezed bdiv ui jqgrid bdiv”消失，冻结列的行高正确显示。@ecasper:只有当您提供可以用来重现问题的演示时，我才能帮助您。您可以尝试做的唯一一件事是在

fhDiv

上设置

z-index

：

$（$（“#BudgetExportGrid”）[0].grid.fhDiv.css（“z-index”，“1”）。表达式
$（“#BudgetExportGrid”）[0].grid.fhDiv
是具有冻结头的div的DOM。应该设置一些足够大的“z指数”值。看起来“1”就足够了，但也不行。我通过电子邮件向您发送了演示站点的登录详细信息。你觉得你能看看吗？提前谢谢@ecasper：我调试了代码，发现了非常简单的键入错误：请参阅我答案的更新部分。非常感谢，Oleg。你帮了大忙！