Question

我在一组列上使用组头。只要我不调整网格大小，这些似乎工作正常。如果我将网格的大小调整为小于其实际宽度，则数据列似乎未对齐，并且未与列标题正确对齐。有没有解决这个问题。

谢谢

钱德拉

编辑添加示例和图片。

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

Answer 1

我刚遇到同样的问题，我最后做的就是在页面调整大小时破坏标题，然后在页面调整大小后再次重新加载它们。然后标题正确对齐

Answer 2

我按照Alvaro所说的那样做了，而且工作正常......

这是我的代码......

在窗口调整大小事件中，

     $("#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>'}
      ] 
    });

Answer 3

这是一个更通用的解决方法。它还解决了jqGrid没有调整大小的问题。以下代码将调整所有jqGrids的大小，这些jqGrids是类“grid-stretch-container”元素的子元素，并且还将修复组头问题。我是这样做的，这样我就可以使用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);
        }
    });
}

Answer 4

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

当我使用jquery 1.7.2时，问题就消失了。

Answer 5

我遇到了与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');
                }
            });

Answer 6

检查jquery.jqGrid.js文件：

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

此行注释掉。

Answer 7

在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，组标题列在调整大小时出错

7 个答案: