web-dev-qa-db-fra.com

Est-il possible d'étirer jqGrid à 100%?

Est-il possible de faire en sorte qu'un jqGrid ait une largeur définie à 100%? Je comprends que la largeur des colonnes doit être une taille de pixel absolue, mais je n'ai encore rien trouvé pour définir la largeur de la grille réelle à une taille relative. Par exemple, je veux définir la largeur à 100%. Au lieu de 100%, il semble utiliser une taille étrange de 450 px. Il y a plus d'espace horizontal sur la page, mais avec la largeur des colonnes et autres, cela fera défiler horizontalement le conteneur (de la grille uniquement). Y-a-t-il moyen de faire autrement?

javascriptjquerycssjqgrid
39
Earlz

J'ai fini par utiliser l'extension jqGrids.fluid pour ce faire et cela a très bien fonctionné.

[~ # ~] mise à jour [~ # ~] : Ce lien semble être mort, mais l'article archivé peut être consulté ici .

4
Earlz

autowidth: true à partir de 3.5

79
johnjohn

Ça marche pour moi:

width: null,
shrinkToFit: false,
33
user1697051

J'utilise ceci pour définir la largeur de la grille à la largeur du conteneur parent.

function resizeGrid() {
        var $grid = $("#list"),
        newWidth = $grid.closest(".ui-jqgrid").parent().width();
        $grid.jqGrid("setGridWidth", newWidth, true);
}
7
Bhargav

Vous pouvez essayer de fixer la largeur de jqGrid en respectant une fonction que j'ai décrite ici appeler correctement setGridWidth sur un jqGrid à l'intérieur d'un dialogue jQueryUI

2
Oleg

Essayez de définir la largeur sur "null". Ça marche pour moi.

$(grid).jqGrid({
   width: null,
});
2
Yuriy

fonction merveilleuse pour cela que j'ai trouvée ici (stackoverflow) ne me souviens pas du message. J'ai commenté la partie en hauteur, gardez cela à l'esprit (ne fonctionnait pas pour moi) mais la largeur est parfaite. jetez cela n'importe où dans votre fichier php.

$resize = <<<RESIZE
jQuery(window).resize(function(){
    gridId = "grid";

    gridParentWidth = $('#gbox_' + gridId).parent().width();
    $('#' + gridId).jqGrid('setGridWidth',gridParentWidth);

   // $('#' + gridId).jqGrid('setGridHeight', //Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
})
RESIZE;
2
molson

Il semble que cela ne soit pas pris en charge. Selon les documents pour setGridWidth :

Définit dynamiquement une nouvelle largeur pour la grille. Les paramètres sont: new_width est le nouveau largeur en pixels...

Les documents de l'option width ne mentionnent pas non plus la possibilité de définir la largeur en pourcentage.

Cela étant dit, vous pouvez utiliser la fonction autowidth ou une technique similaire pour donner à la grille la largeur initiale correcte. Suivez ensuite les méthodes décrites dans resize-jqgrid-when-browser-is-resized pour vous assurer que la grille est correctement redimensionnée lorsque la fenêtre du navigateur est redimensionnée, ce qui simulera l'effet d'avoir une largeur de 100%.

1
Justin Ethier

Plus simple

  $("#gridId").setGridWidth($(window).width() );
1
Richard
loadComplete : function () {
     $("#gridId").jqGrid('setGridWidth', $(window).width(), true); 
},
1
Surbhit

Vous ne pouvez pas donner la largeur en pourcentage, tandis que si vous le souhaitez en fonction de la résolution d'écran, définissez comme suit: var w = screen.width puis utilisez cette variable dans l'option width de jqgrid.

J'espère que cela vous sera utile.

0
M Hussain

Je l'ai fait et je travaille comme un charme.

$(document).ready(function () { $("#jQGridDemo").setGridWidth(window.innerWidth - offset); }); J'ai mis un décalage de 50

0
Savan S

J'ai remarqué que seule la combinaison des 3 réponses données, c'est-à-dire la réponse de JohnJohn , la réponse de Bhargav et la réponse de Molson m'a aidé à réaliser un vrai redimensionnement automatique.

J'ai donc créé du code qui profite de tout, voir l'extrait ci-dessous. Je l'ai également amélioré pour que vous puissiez passer un seul objet de grille ou un tableau de grilles à redimensionner.

Si vous l'essayez, assurez-vous

  1. cliquer sur Run code snippet, et
  2. puis cliquez sur le bouton de lien "Pleine page" dans le coin supérieur droit.

Redimensionnez la fenêtre et observez comment les grilles changent de taille et se réalignent automatiquement:

// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {

  // pass one single grid, or an array of grids
  function resizeGrid(jqGridObj) {
  
    var $gridArray = Array.isArray(jqGridObj) ? jqGridObj : [jqGridObj];
    for(let i=0; i<$gridArray.length; i++) {
      var $grid=$gridArray[i],
      newWidth = $grid.closest(".ui-jqgrid").parent().width();
      $grid.jqGrid("setGridWidth", newWidth, true);
    }
    
  };
  
  // template for the 2 grids
  function createGrid(gridName, gridData) {
    var gridObj=$("#"+gridName); gridObj.jqGrid({
      autowidth: true, height: 45, 
      colNames: ['First name', 'Last name', 'Updated?'],
      colModel: [{name: "firstName"}, {name: "lastName"}, {name: "updated"}],
      data: gridData,
      loadComplete: function() { 
        // resize on load
        resizeGrid(gridObj);
      }      
    });
    return gridObj;
  }

  // instantiate Grid1
  var  data1 = [
      { id: 10, firstName: "Jane", lastName: "Doe", updated: "no"},
      { id: 20, firstName: "Justin", lastName: "Time", updated: "no" }
    ];    
  var gridObj1=createGrid("grid1", data1);

  // instantiate Grid2
  var  data2 = [
      { id: 10, firstName: "Jane", lastName: "Smith", updated: "no"},
      { id: 20, firstName: "Obi-Wan", lastName: "Kenobi", updated: "no" }
    ];    
  var gridObj2=createGrid("grid2", data2);
  
  function debounce(fn, delay) {
    delay || (delay = 200);
    var timer = null;
    return function () {
      var context = this, args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    };
  }
  
 function throttle(fn, threshhold, scope) {
    threshhold || (threshhold = 200);
    var last,
        deferTimer;
    return function () {
      var context = scope || this;

      var now = +new Date,
          args = arguments;
      if (last && now < last + threshhold) {
        // hold on to it
        clearTimeout(deferTimer);
        deferTimer = setTimeout(function () {
          last = now;
          fn.apply(context, args);
        }, threshhold);
      } else {
        last = now;
        fn.apply(context, args);
      }
    };
  }
    
  // change size with window for both grids
  jQuery(window).resize(throttle(function(){
    resizeGrid([gridObj1, gridObj2]);
   }));
  
});
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Resizing jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

<table id="grid1"></table>
<br/>
<table id="grid2"></table>

Remarque: Bien que cet exemple soit simple, si vous avez des jqGrids plus complexes, vous aurez besoin de étranglement ou debouncing (les 2 fonctions throttle et debounce sont prises à partir de là), sinon l'événement resize pourrait être vraiment lent. Suivez le lien pour en savoir plus. Je préfère la limitation dans ce cas car cela semble plus fluide, mais j'ai inclus les deux fonctions afin que vous puissiez les utiliser si nécessaire dans votre code.

Dans mon vrai code, j'avais besoin d'une limitation, sinon le redimensionnement devenait beaucoup trop lent. L'extrait de code comprend déjà un gestionnaire limité avec un seuil par défaut de 200 ms. Vous pouvez l'expérimenter, par exemple si vous remplacez throttle par debounce dans l'extrait de code, c'est-à-dire.

jQuery(window).resize(debounce(function(){
    resizeGrid([gridObj1, gridObj2]);
 }));
0
Matt

Essaye ça,

Remplacer width: 1100àautowidth: true,

0
Sreenath S