Richtig Aufrufen von SetGridWidth auf einem jqGrid in einem jQueryUI-Dialog

Question

Ich habe einen jQueryUI-Dialog (#locDialog), der ein jqGrid ($grid) enthält. Wenn der Dialog geöffnet wird (anfangs, aber er wird immer aufgerufen, wenn er geöffnet wird), möchte ich die Größe $grid auf die Größe von $locDialog ändern. Wenn ich dies zu Beginn mache, bekomme ich Bildlaufleisten innerhalb des Gitters (nicht innerhalb des Dialogs).

Wenn ich den Code debuggen, sehe ich die Breite des $grid 677. So ist, nenne ich setGridWidth() wieder und die Breite überprüfen, und ich habe jetzt 659, die weniger 18px ist, die die Größe des Scrollbereich ist für das jqGrid (Dun-dun-dun ..)

Wenn ich den Dialog rezie, skaliere ich auch das Raster, und alles ist glücklich - keine Scrollbalken, außer wo nötig.

Mein Dialoginitialisierungsauftrag Code:

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

Ich bin gespannt, ob jemand dieses vorher gesehen hat. Wirklich, es ist nicht das Ende der Welt, wenn ich anfangs zunächst unnötige Scrollbalken habe, aber es ist nur komisch, dass ich beim ersten Aufruf von setGridWidth den Scrollbereich von 18px nicht berücksichtige.

Soweit die magische Zahl 54, das ist die Zahl, die ich von der Höhe des Dialogfeldwerts subtrahieren musste, um das Raster ohne unnötige Bildlaufleisten zu rendern.

---

Ich denke, es kann ein Timing-Problem sein, obwohl dies nicht viel Sinn macht. Vielleicht sollte ich ein Ereignis aufrufen, sobald das Raster vollständig geladen ist. Dies kann sicherstellen, dass es seine Breite korrekt berechnet.

Answer 1

Es gibt einige Fälle, in denen jqGrid die Breite ein wenig falsch berechnet. Meistens habe ich Probleme mit der Rasterweite, in einigen Fällen aber auch mit der IE6. Also muss ich eine kleine Funktion schreiben, um das Problem zu beheben.

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

In diesem Code "main" ist die ID der Eltern div innerhalb von denen das Raster erstellt werden. Im Code teste ich (scrollWidth > mainWidth), ob die Breite von eine Vergrößerung der jqGrid-Breite zulässt.

Richtige Ort, um diese Funktion aufzurufen, ist innerhalb von loadComplete:

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

und innerhalb von "done", wenn Sie 'columnChooser' verwenden, wenn die Verwendung Verwendung Query('#list').jqGrid('columnChooser');

(in diesem Beispiel habe ich auch 'gridResize' verwenden.)