Quelle est la meilleure solution pour définir la largeur et la hauteur d'un JQGrid jQuery?

Question

je rencontré un problème étrange lors de l'utilisation jqGrid jQuery, code suivant fragment est de sa création:

grid= jQuery("#grid_id").jqGrid({ 
    data : response.list, 
    datatype : "local", 
    colNames : columnNames, 
    colModel : [ {....}],      
    rowNum : 30, 
    width : $("#grid_id").width(), 
    height: $("#grid_page").height(), 
    rowList : [ 30, 100, 150 ], 
    pager : "#grid_page", 
    sortname : 'name', 
    viewrecords : true, 
    sortorder : "desc", 
    shrinkToFit: false, 
    rownumbers: true, 
    altRows:true, 
    caption: "Sample Grid" 
}); 

Cette question a 3 symptômes:

1, Cette grille a plus de 35 colonnes et la largeur chaque colonne est supérieure à 100 PX, et la largeur de cette grille est fixée en 1000PX, de sorte que la grille affiche une barre de défilement pour que l'utilisateur puisse voir toutes les colonnes. (Comme vous le voyez, je fixe la largeur et la hauteur de la grille avec des valeurs fixes)

2, Cette grille fonctionne bien pour la première fois, mais les en-têtes et le contenu de celui-ci manqué quand il a été mis à jour pour la deuxième fois ou plus tard .

3, j'essaie de commenter le paramètre de largeur, en d'autres termes, je n'ai pas défini une largeur à cette grille, cela fonctionne bien que ce soit pour la première fois ou la seconde la somme de toutes les colonnes (3500PX), il développe toute la page laide.

grid= jQuery("#grid_id").jqGrid({ 
    data : response.list, 
    datatype : "local", 
    colNames : columnNames, 
    colModel : [ {....}],      
    rowNum : 30, 
    // width : $("#grid_id").width(), COMMENT it. 
    height: $("#grid_page").height(), 
    rowList : [ 30, 100, 150 ], 
    pager : "#grid_page", 
    sortname : 'name', 
    viewrecords : true, 
    sortorder : "desc", 
    shrinkToFit: false, 
    rownumbers: true, 
    altRows:true, 
    caption: "Sample Grid" 
}); 

La question que je veux poser est la suivante: Quelle est la meilleure solution pour régler la largeur et la hauteur à un jQuery jqGrid? Comment devrait les mettre à ma grille?

Simplement, comment avoir une grille qui a beaucoup de colonnes fonctionne avec une barre de défilement X?

Answer 1

Après avoir essayé plusieurs fois, j'ai résolu ce problème. Pour mon cas, si la grille doit avoir une largeur et une hauteur, et afficher la barre de défilement horizontale lorsque ses colonnes un trop grand nombre, comme suit façon de définir la jqGrid:

grid= jQuery("#grid_id").jqGrid({ 
    width : 1000, 
    height: 800, 
    shrinkToFit: false, 
}); 

La chose la plus importante qui fait que la grille travailler sans problème est que vous DEVRIEZ ajouter la configuration THML 'align = "center"' à la table que la grille attache.

<table id="grid_id" align="center"></table> 

Je ne sais pas pourquoi cela résout, mais de toute façon, cela fonctionne.