2

一連の列でグループヘッダーを使用しています。グリッドのサイズを変更しない限り、これらは問題なく機能するようです。グリッドのサイズを実際の幅よりも小さくすると、データ列の位置がずれているように見え、列見出しと正しく整列しません。これに対する修正はありますか？

ありがとうございました

チャンドラ

例と画像を追加するために編集。

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>'}
   ]
});

写真は、通常の列と位置がずれている列の違いを示しています

4

7 に答える 7

3

私はちょうど同じ問題を抱えていました.これを回避するために最終的に行ったことは、ページのサイズ変更時にヘッダーを破棄し、ページのサイズ変更後にヘッダーを再度リロードすることでした. ヘッダーは適切に配置されます

于 2013-02-06T15:33:03.257 に答える
1

アルバロが言ったようにやった、それはうまくいっている..

これが私のコードです...

ウィンドウのサイズ変更イベントでは、

     $("#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>'}
      ] 
    });
于 2013-03-04T11:09:43.493 に答える
1

より一般的な回避策を次に示します。また、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);
        }
    });
}
于 2013-08-08T01:25:07.570 に答える
0

私はまったく同じ問題を抱えています、いくつかのテストの後、jqgridはjquery 1.8と互換性がないことがわかりました（私はあなたがそのバージョンを使用していると思います）

jquery 1.7.2を使用すると、問題は解消されます。

于 2012-08-24T03:06:49.903 に答える
0

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');
                }
            });
于 2015-10-21T14:28:49.923 に答える
-1

ファイル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' : '')};
于 2016-01-17T09:35:15.093 に答える
-1

チェックjquery.jqGrid.jsファイル:

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

この行はコメントアウトします。

于 2015-07-02T02:19:02.637 に答える