7

#locDialog内部にjqGrid ( )がある jQueryUI ダイアログ ( ) があり$gridます。ダイアログが開くと（最初は、開くたびに呼び出されます）、$gridのサイズに合わせてサイズを変更したいと思い$locDialogます。最初にこれを行うと、(ダイアログ内ではなく) グリッド内にスクロールバーが表示されます。

コードをデバッグすると、幅が 677 であることがわかります。そのため、もう一度$grid呼び出しsetGridWidth()て幅を確認すると、18 ピクセル少ない 659 になりました。これは、jqGrid のスクロール領域のサイズです (Dun-dun -ダン..)

ダイアログのサイズを変更すると、グリッドのサイズも変更されます。必要な場合を除いて、スクロールバーはありません。

私のダイアログの初期化コード:

$locDialog = $('#location-dialog').dialog({
    autoOpen: false,
    modal: true,
    position: ['center', 100],
    width: 700,
    height:500,
    resizable: true,
    buttons: {
                "Show Selected": function() {alert($('#grid').jqGrid('getGridParam','selarrrow'));},
                "OK": function() {$(this).dialog('close');},
                "Cancel": function() {$(this).dialog('close');}
             },
    open: function(event, ui) {
        $grid.setGridHeight($(this).height()-54); 
          // No idea why 54 is the magic number here
        $grid.setGridWidth($(this).width(), true);
    },
    close: function(event, ui) {

    },
    resizeStop: function(event, ui) {
        $grid.setGridWidth($locDialog.width(), true);
        $grid.setGridHeight($locDialog.height()-54);
    }
});

誰かがこれを前に見たことがあるかどうか、私は興味があります。実際、最初に不要なスクロールバーがあったとしても、世界の終わりではありませんが、最初に setGridWidth を呼び出すときに、18px のスクロール領域が考慮されていないのは奇妙なことです。

魔法の数字 54 までは、不要なスクロールバーなしでグリッドをレンダリングするために、ダイアログ値の高さから差し引かなければならなかった数字です。

これはあまり意味がありませんが、タイミングの問題かもしれないと思います。おそらく、グリッドが完全にロードされたら、イベントを呼び出す必要があります。これにより、幅が正しく計算されるようになります。

4

1 に答える 1

15

jqGrid が幅を少し正しく計算しない場合があります。ほとんどの場合、グリッドの幅に問題がありますが、場合によっては IE6 でも高さに問題があります。そのため、問題を解決するために小さな関数を作成する必要があります。

var fixGridWidth = function (grid) {
    var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth;
    var mainWidth = jQuery('#main').width();
    var gridScrollWidth = grid[0].scrollWidth;
    var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode);
    var scrollWidth = gridScrollWidth;
    if (htable.length > 0) {
        var hdivScrollWidth = htable[0].scrollWidth;
        if ((gridScrollWidth < hdivScrollWidth))
            scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth)
    }
    if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
        var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth;  // min (scrollWidth, mainWidth)
        // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth
        if (newGridWidth != gviewScrollWidth)
            grid.jqGrid("setGridWidth", newGridWidth);
    }
};

var fixGridHeight = function (grid) {
    var gviewNode = grid[0].parentNode.parentNode.parentNode;
    //var gview = grid.parent().parent().parent();
    //var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv");
    var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode);
    if (bdiv.length) {
        var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight;
        var height = grid.height();
        if (delta !== 0 && height && (height-delta>0)) {
            grid.setGridHeight(height-delta);
        }
    }
};

var fixGridSize = function (grid) {
    this.fixGridWidth(grid);
    this.fixGridHeight(grid);
};

このコード"main"には、グリッドが作成される親 div の ID があります。コードでは、幅が jqGrid 幅scrollWidth > mainWidthの増加を許可するかどうかをテストします ( ) 。"main"

この関数を呼び出す正しい場所は次のloadCompleteとおりです。

loadComplete: function() {
    var gr = jQuery('#list');
    fixGridSize(gr);
}

および の内部で"done"、使用する'columnChooser'場合は使用する場合Query('#list').jqGrid('columnChooser');

(この例では も使用しています'gridResize'。)

于 2010-04-23T06:58:08.273 に答える