jquery - 固定卡住列的行高jqgrid 4.6

Question

我正在尝试使用 this 修复 JQGrid 卡住列的行高文章。几天以来，我一直在努力让它发挥作用。由于网格加载正确，我在一定程度上取得了成功，但在调整列标题大小时仍然遇到问题。

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

if (this.grid !== undefined) { }

重现问题的步骤:

1. 加载网格。
2. 尝试减小列标题的宽度，以便重新调整卡住列的高度。

以下是我的代码:

$.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]);
});
//]]>

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

我在这里做错了什么？

Answer 1

尝试 the following demo .它有同样的问题吗？如果您可以在此处重现该问题，请描述完整的测试用例(如何逐步重现该问题)。

已更新:您发布的代码似乎是旧代码与我的演示代码的组合。问题存在于 $grid = $("#list") 行中。我在演示中使用带有 id="list" 的网格，但您使用带有 id="BudgetExportGrid" 的网格。所以 $grid.bind("jqGridResizeStop", ...) 不起作用。您应该只使用正确的 ID，调整大小的问题应该得到解决。