web-dev-qa-db-fra.com

JQGrid Largeur automatique de la colonne

Je me demande simplement comment définir une largeur de colonne jqGrid sur auto? 

...
colModel: [
{ name: 'MyDescription', index: 'description', align: 'left', width: 150, sortable: false },
...

pour l'instruction ci-dessus, comment puis-je spécifier une largeur automatique pour la colonne afin qu'elle corresponde à la taille du contenu maximal qu'elle contient.

jqgridwidth
18
SARAVAN

Il n'y a aucun moyen de spécifier la colonne autowidth dans jqGrid. Mais vous pouvez utiliser l'option shrinkToFit d'une grille définie sur true et définir des valeurs approximatives de largeur (par exemple 20, 20, 20, 80) et la largeur des colonnes sera mise à l'échelle à la largeur d'une grille.

shrinkToFit:

Cette option décrit le type de calcul de la largeur initiale de chaque colonne par rapport à la largeur de la grille. Si la valeur est true et que l'option value in width est définie, procédez comme suit: Chaque largeur de colonne est mise à l'échelle en fonction de la largeur d'option définie. Exemple: si nous définissons deux colonnes d’une largeur de 80 et 120 pixels, mais souhaitons que la grille ait une résolution de 300 pixels, les colonnes sont alors recalculées comme suit: ) * 80 (largeur de colonne) = 120 et 2 colonnes = 300/200 * 120 = 180. La largeur de la grille est de 300px. Si la valeur est false et que l'option value in width est définie, procédez comme suit: La largeur de la grille est la largeur définie dans l'option. Les largeurs de colonne ne sont pas recalculées et ont les valeurs définies dans colModel.

28
zihotki

Vous pouvez utiliser la méthode setGridWidth.

Exemple:

$(window).on('resize', function() {
   $("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');

DÉMO

8
Diogo

Cela fonctionne principalement pour moi.

<div id="myjqgridwrapper" style="width:100%;">
    <table id="myjqgrid"></table>
    <div id="myjqgridfooter"></div>
</div>

<script type="text/javascript">
    //script to autosize grid
    //don't forget autowidth:true for initial size
    $(window).bind('resize', function(){
        //set to 0 so grid does not continually grow
        $('#myjqgrid').setGridWidth(0);
        //resize to our container's width
        $('#myjqgrid').setGridWidth($('#myjqgridwrapper').width());
    }).trigger('resize');
</script>
1
Biff MaGriff
Try this. Worked For Me

.ui-common-table{
  width: 100% !important;
}

.ui-jqgrid .ui-jqgrid-hbox{
  padding-right: 0px !important;
}
1
AceJordan

Vous pouvez essayer d'utiliser tableToGrid , autant que je m'en souvienne, il préserve les largeurs. Si tel est le cas, vous pouvez également consulter son code source si son comportement ne répond pas pleinement à vos besoins.

0
queen3