jqgrid - jqgrid, group header columns get mis-aligned on resize

Question

I am using group headers on a set of columns. These seem to work OK as long as I dont' resize the grids. If and when I resize the grid to be smaller than it's actual width the data columns seem to be misaligned and do not line up properly with the column heading. Is there a fix for this.

Thank You

Chandra

Edited to add example and picture.

jQuery("#mbboAbboList").jqGrid('setGroupHeaders', {
    useColSpanStyle: false,
    groupHeaders:[
     {startColumnName: 'mbboInfo.bidSize', numberOfColumns: 4,titleText: '<em>MBBO</em>'},
     {startColumnName: 'abboInfo.bidSize', numberOfColumns: 4, titleText: '<em>ABBO</em>'}
   ]
});

Picture shows difference between normal and mis-aligned columns

score 3 · Accepted Answer

我刚刚遇到了同样的问题，我最终解决这个问题的方法是在页面调整大小时破坏标题，然后在页面调整大小后再次重新加载它们。然后标题正确对齐

score 1 · Accepted Answer

这是一个更通用的解决方法。它还解决了 jqGrid 不调整大小的问题。以下代码将调整作为“grid-stretch-container”类元素的子元素的所有 jqGrid 的大小，并将修复组标题问题。我这样做是为了创建一个带有 class="grid-stretch-container" 和适当拉伸样式的 div。包含的 jqGrid 将随着父 div 调整大小而调整大小。

$(document).ready(function () {
    // Bind the window resize event.
    // The timer prevents multiple resize events while resizing. 
    // You might want to play with the 20ms delay if you're getting
    // multiple events or noticeable lag.
    var resizeTimer;
    $(window).bind("resize", function () {
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(resizeApp, 20);
         });

    // Trigger an initial resize so everything looks good on load.
    $(window).trigger("resize");
}

function resizeApp() {
    // Resize all visible jqGrids that are children of ".grid-stretch-container" elements.
    // Note: You should call resizeApp when any grid visibility changes.
    $(".grid-stretch-container:visible .ui-jqgrid-btable").each(function (index) {
        // Resize the grid to it's parent.
        var container = $(this).closest(".grid-stretch-container");
        $(this).jqGrid().setGridWidth(container.width());
        // The grid height does not include the caption, pagers or column headers
        // so we need to compute an offset.
        // There's probably a better method than accessing the jqGrid "gbox".
        var gbox = $(this).closest("#gbox_" + this.id);
        var height = $(this).getGridParam("height") + (container.height() - gbox.height());
        $(this).jqGrid().setGridHeight(height);

        // Destroy and recreate the group headers to work around the bug.
        var groupHeaders = $(this).jqGrid("getGridParam", "groupHeader");
        if (groupHeaders != null) {
            $(this).jqGrid("destroyGroupHeader").jqGrid("setGroupHeaders", groupHeaders);
        }
    });
}

score 1 · Accepted Answer

我按照阿尔瓦罗所说的做了，这很奏效..

这是我的代码...

在窗口调整大小事件中，

     $("#grid").jqGrid('destroyGroupHeader');
     if($('#grid_container').attr("id")!==undefined)
         $("#grid").setGridWidth($('#grid_container')[0].offsetWidth,true);
     grid_reconstruct_GroupHeaders();

grid_container 是一个 div，其中存在我的网格，我将 offsetwidth 作为剩余元素的宽度以百分比表示。

我的 grid_reconstruct_GroupHeaders() 函数看起来像....

$("#grid").jqGrid('setGroupHeaders', {
      useColSpanStyle: false, 
      groupHeaders:[
        {startColumnName: 'organisation', numberOfColumns: 1, titleText: '<span>Order/Ready Completion</span>'},
        {startColumnName: 'Order', numberOfColumns: 12, titleText: '<span>Manual Queue</span>'},
        {startColumnName: 'Process', numberOfColumns: 1, titleText: '<span>Automated Queue</span>'},
        {startColumnName: 'Total', numberOfColumns: 1, titleText: '<span>TOTAL</span>'}
      ] 
    });

score 0 · Accepted Answer

我有完全相同的问题，经过一些测试，我发现 jqgrid 与 jquery 1.8 不兼容（我假设你使用的是那个版本）

当我使用 jquery 1.7.2 并且问题消失了。

score 0 · Accepted Answer

我遇到了同样的问题，标题在 jQGrid 4.6 版中没有对齐。我可以通过绑定到窗口调整大小功能来解决这个问题，就像 moomoo 一样。我想发布这个答案，因为它还修复了重新调整列的大小。

var $this = $(this);

            // Resize helper
            $(window).bind('resize', function () {

                //logic to restyle double headers to be responsive
                if ($this.getGridParam('groupHeader') != null) {
                    var gridId = $this.attr('id');

                    var headerTable = $("#gview_" + gridId + " > div.ui-state-default.ui-jqgrid-hdiv > div > table");

                    headerTable.css('width', 'auto');

                    var objHeader = $("#gview_" + gridId + " > div.ui-state-default.ui-jqgrid-hdiv > div > table tr[role=rowheader] th");

                    for (var i = 0; i < objHeader.length; i++) {
                        var col = $("table[id=" + gridId + "] td[aria-describedby=" + objHeader[i].id + "]");
                        var width = col.outerWidth();

                        $(objHeader[i]).css("min-width", width);
                    }
                }

            }).trigger('resize');


//call the resize function when someone resizes a column on the screen
         $this.jqGrid('setGridParam', {
                resizeStop: function (newwidth, index) {
                    $(window).trigger('resize');
                }
            });

score -1 · Accepted Answer

检查jquery.jqGrid.js文件：

setGroupHeaders : function ( o ) { 
.
.
.
$("< th >", {role: 'gridcell'}).css(thStyle).addClass("ui-first-th-"+ts.p.direction).appendTo($firstHeaderRow);

这一行注释掉。

score -1 · Accepted Answer

在jquery.jqGrid.js文件中：

setGroupHeaders : function ( o ) { 
.
.
.
change the row
thStyle = { height: '0px', width: ths[i].width+ 'px', display: (cmi.hidden ? 'none' : '')};
to 
thStyle = { height: '0px', width: ths[i].width*0.99+ 'px', display: (cmi.hidden ? 'none' : '')};

jqgrid - jqgrid, group header columns get mis-aligned on resize

7 回答 7

Related

Reference