Jqgrid冻结列 - 除非我手动调整网格大小，否则无法冻结它们

Question

我已经阅读了jqgrid中我在冻结列上找到的每一篇文章。并实施了以下代码 结果......当我在我的应用程序中转到我的电子表格网格时，3个cols不会被冻结。如果我拖动左下角的小调整大小图标，那么BUt就会被冻结。

为什么首次绘制电子表格时它不起作用？ 这是代码：

           var $grid = $("#list4");
            var 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');
                });
            };
        var fixPositionsOfFrozenDivs = function () {
                var $rows;
                if (this.grid === undefined) {
                    return;
                }
                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+1);
                    $(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());
                }
            };
            var 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({
                datatype: "local",
                shrinkToFit:false,
                autowidth:true,
                height: 450,
                hoverrows: true,
                sortable: false,
                colNames:[' <br> <br> <br> <br>Year',
                          ' <br> <br> <br>Your<br>Age',
                          ' <br> <br> <br>Spouse<br>Age',
                          'Your Annual<br>Job<br>Income',
                          'Spouse Annual<br>Job<br>Income'
                colModel:[
                    {name:'year',index:'year', width:50, align:"center",sortable:false, sorttype:"int",classes:'spreadsheet_cell0', frozen:true},
                    {name:'age0',index:'age0', width:50, align:"center",sortable:false, sorttype:"int",frozen:true},
                    {name:'age1',index:'age1', width:50, align:"center",sortable:false, sorttype:"int",frozen:true},
                    {name:'salary0',index:'salary0',  width:100, align:"right",sortable:false,sorttype:"float",formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$"}},
                    {name:'salary1',index:'salary1',  width:100, align:"right",sortable:false,sorttype:"float",formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$"}}

                ],
                multiselect: false,
                rowNum:20,
                rowList:[10,20],
                altRows:false,
                onSelectRow: function (id) {
                    if (id && id!=previous_row) {
                        previous_row=id;
                        }
                    },
                loadComplete: function () {

                                fixPositionsOfFrozenDivs.call(this);
                        }
            });


        // ADD DATA TO THE GRID
            addData();

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


        $(window).on("resize", function () {
            // apply the fix an all grids on the page on resizing of the page
            $("table.ui-jqgrid-btable").each(function () {
                fixPositionsOfFrozenDivs.call(this);
                //fixGboxHeight.call(this);
            });
        });

        // after all that freeze the cols and fix the divs
        resizeColumnHeader.call($grid[0]);
        $grid.jqGrid('setFrozenColumns');
        $grid.triggerHandler("jqGridAfterGridComplete");
        fixPositionsOfFrozenDivs.call($grid[0]);