Chiamare correttamente setGridWidth su un jqGrid all’interno di una finestra di dialogo jQueryUI

Ho una finestra di dialogo #locDialog ( #locDialog ) che ha un jqGrid ( $grid ) al suo interno. Quando si apre la finestra di dialogo (inizialmente, ma viene chiamato ogni volta che si apre), voglio che la $grid $locDialog ridimensionata alla dimensione del $locDialog . Quando lo faccio inizialmente, ottengo barre di scorrimento all’interno della griglia (non all’interno della finestra di dialogo).

Se eseguo il debug del codice, vedo che la larghezza della $grid è 677. Quindi chiamo di nuovo setGridWidth() e controllo la larghezza e ora ho 659, che è 18px in meno, che è la dimensione dell’area di scorrimento per il jqGrid (Dun-dun-dun ..)

Quando riempio la finestra di dialogo, ridimensiono anche la griglia, e tutto è felice: nessuna barra di scorrimento, tranne dove necessario.

Il mio codice di init di dialogo:

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

Sono curioso di sapere se qualcuno l’ha già visto prima. In realtà, non è la fine del mondo se inizialmente ho delle barre di scorrimento non necessarie, ma è solo strano che quando chiamo setGridWidth inizialmente, non tenga conto dell’area di scorrimento di 18px.

Per quanto riguarda il numero magico 54, questo è il numero che ho dovuto sottrarre dall’altezza del valore della finestra di dialogo per ottenere il rendering della griglia senza barre di scorrimento inutili.


Penso che potrebbe essere un problema di temporizzazione, anche se questo non ha molto senso. Forse dovrei chiamare un evento una volta che la griglia è stata caricata completamente. Questo può garantire che calcoli correttamente la sua larghezza.

Ci sono alcuni casi in cui jqGrid calcola la larghezza un po ‘errata. Principalmente ho problemi con la larghezza della griglia, ma in alcuni casi su IE6 anche con l’altezza. Quindi devo scrivere una piccola funzione per risolvere il problema.

 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 questo codice "main" è l’id del genitore div all’interno del quale verrà creata la griglia. Nel codice test ( scrollWidth > mainWidth ) se la larghezza di "main" consente di aumentare la larghezza di jqGrid.

La posizione corretta per chiamare questa funzione è all’interno di loadComplete :

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

e all’interno di "done" , se si usa 'columnChooser' se si usa Query('#list').jqGrid('columnChooser');

(in questo esempio uso anche 'gridResize' .)