Prawidłowe wywoływanie metody setGridWidth w jqGrid wewnątrz okna dialogowego jQueryUI

Question

Mam okno dialogowe jQueryUI (#locDialog), w którym znajduje się jqGrid ($grid). Kiedy otworzy się okno dialogowe (początkowo, ale zostanie wywołane za każdym razem, gdy zostanie otwarte), chcę zmienić rozmiar $grid na rozmiar $locDialog. Kiedy robię to początkowo, dostaję paski przewijania wewnątrz siatki (nie wewnątrz okna dialogowego).

Gdybym debugowania kodu, widzę szerokość $grid jest 677. Więc wzywam setGridWidth() ponownie i sprawdzić szerokość i teraz mam 659, który jest 18px mniej, co jest wielkość obszaru przewijania dla jqGrid (Dun-dun-dun ..)

Kiedy ponownie wybieram okno dialogowe, zmieniam również rozmiar siatki i wszystko jest w porządku - bez pasków przewijania, chyba że jest to konieczne.

Moja dialogowe Init:

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

Jestem ciekawy, czy ktoś widział tego wcześniej. Naprawdę, to nie koniec świata, gdy początkowo mam niepotrzebne paski przewijania, ale to dziwne, że kiedy początkowo wywołuję setGridWidth, nie uwzględnia to obszaru przewijania o wartości 18 pikseli.

Jeśli chodzi o magicznej liczby 54, czyli liczba musiałem odjąć od wysokości wartości dialogowym, aby uzyskać siatkę do renderowania bez zbędnych pasków przewijania.

---

myślę, że może to być problem z synchronizacją, choć nie ma to wiele sensu. Być może powinienem wywołać zdarzenie, gdy siatka zostanie całkowicie załadowana. Może to zapewnić prawidłowe obliczenie szerokości.

Answer 1

Istnieje kilka przypadków, w których jqGrid obliczyć szerokość nieco niepoprawną. Najczęściej mam problemy z szerokością siatki, ale w niektórych przypadkach na IE6 również z wysokością. Więc muszę napisać małą funkcję, aby naprawić problem.

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

W tym kodzie "main" jest id macierzystego div wewnątrz którego zostanie utworzona siatka. W kodzie I test (scrollWidth > mainWidth) czy szerokość "main" pozwala na zwiększenie szerokości jqGrid.

odpowiednim miejscu do wywołania tej funkcji jest wewnątrz loadComplete:

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

i wewnątrz "done", jeśli używasz 'columnChooser' jeśli użycie użycie Query('#list').jqGrid('columnChooser');

(w tym przykładzie używam również 'gridResize').