web-dev-qa-db-fra.com

barre de défilement horizontale jqGrid

J'ai développé l'interface AJAX avec jQuery et jqGrid.

Comment puis-je supprimer la barre de défilement horizontale de ma table jqGrid?

http://dskarataev.ru/jqgrid.png

Si je définis autowidth: true, la largeur de la table est égale à la largeur de la colonne, mais j'ai besoin de la largeur de la table = largeur de l'élément parent avec l'id renvoyé par la fonction getSelectedTabHref()

alors je fais fonction:

$(window).bind('resize', function() {
  $('#tasks').setGridWidth($(getSelectedTabHref()).width());
  $('#tasks').setGridHeight($(window).height()-190);
}).trigger('resize');

et voici comment je crée la table jqGrid:

$('#tasks').jqGrid({
  datatype: 'local',
  colNames:[labels['tasksNum'],labels['tasksAdded']+"/"+labels['tasksAccepted'],labels['tasksOperator'],labels['tasksClient'],labels['tasksManager'],labels['tasksDesc']],
  colModel :[
    {name:'taskId', index:'taskId', width:1, align:'right'},
    {name:'taskAdded', index:'taskAdded', width:3},
    {name:'taskOperator', index:'taskOperator', width:4},
    {name:'taskClient', index:'taskClient', width:7},
    {name:'taskManager', index:'taskManager', width:4},
    {name:'taskDesc', index:'taskDesc', width:8}]
});

jqueryjquery-pluginsjqgridscrollbarhorizontal-scrolling
32
dskarataev

j'ai ajusté ui.grid.css parce que je n'avais pas besoin d'une barre de défilement horizontale. j'ai fait ça:

.ui-jqgrid .ui-jqgrid-bdiv {
  position: relative; 
  margin: 0em; 
  padding:0; 
  /*overflow: auto;*/ 
  overflow-x:hidden; 
  overflow-y:auto; 
  text-align:left;
}

commenté, je viens d’utiliser overflow-x pour masquer la barre de défilement horizontale et maintenant tout va bien pour moi. 

75
Herman van der Blom

Dans certaines situations, jqGrid calcule une largeur de grille incorrecte. Vous pouvez essayer d’augmenter le paramètre cellLayout (voir http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options ). Cela peut être nécessaire si vous modifiez certains CSS de jqGrid.

Dans d'autres situations, vous pouvez corriger la largeur en respectant la fonction fixGridWidth ou fixGridSize que j'ai décrite dans Appel correct de setGridWidth sur un jqGrid à l'intérieur d'un dialogue jQueryUI . N'oubliez pas que vous devriez l'utiliser à l'intérieur de loadComplete.

5
Oleg

Définissez une width explicite sur la grille et utilisez 

autowidth: false,
shrinkToFit: true
4
arviman

setGridWidth redimensionnera définitivement votre grille à celle de la nouvelle largeur donnée, mais assurez-vous de l'utiliser avec autowidth = true. setGridWidth peut avoir un problème avec IE 7 ou plus.

Quelques solutions de travail discutées ici (au cas où vous n’auriez pas encore trouvé de solution), 

Redimensionner jqGrid lorsque le navigateur est redimensionné?

http://www.trirand.com/blog/?page_id=393/discussion/browser-resize-how-to-resize-jqgrid/

----vieux----

Il y a plusieurs options que vous pouvez essayer, 

De http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

"autowidth" : true

ou

"shrinkToFit": false

Sinon, postez votre code jqgrid, laissez-nous analyser.

1
Prem Rajendran

On y va width : '1083', shrinkToFit:false,

Lorsque nous définissons ce qui précède, nous devons nous assurer que notre ui.jqgird.css est défini comme ci-dessous.

.ui-jqgrid .ui-jqgrid-bdiv { height: auto; margin: 0em; max-height: 250px; overflow-x: auto; overflow-y: auto; padding: 0px; position: relative; text-align: left; }
1
kiran vennampelli

un peu tard, mais pourrait être utile pour quelqu'un

Vous devez définir la hauteur de la table uniquement en chiffres, sans «px» à la fin.

1
Agustin Baez

Ajouter le script ci-dessous à votre style.css résoudra votre problème.

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-x:hidden !important; 
    overflow-y:auto !important;
}
0
Hari Prasad Ranganathan

Appliquez AppearanceSettings ShrinkToFit="False" et AutoWidth="true" à votre jqGrid.

0
Ankit Gupta

j'ai utilisé la méthode API jqgrid setGridHeight. cela fonctionne bien pour moi dans IE 8 également. 

var gr = jq('#grid');
gr.setGridHeight(350,true);

je mets ces lignes sous l'appel de fonction 'loadComplete'.

0
Sam

C'est simple, utilisez-le dans jqgrid shrinkToFit: false

0
cavalsilva

Voici comment je l'ai fait et jusqu'ici, tout va bien. Fondamentalement, nous redimensionnons la grille pour l’adapter à la barre de défilement verticale. Par redimensionnement, il n’ya pas de débordement horizontal et la barre horizontale n’apparaît donc jamais. La taille de notre cellule reste la même et la dernière cellule n'est pas partiellement cachée.

loadComplete: function (data) {
                //set our "ALL" select option to the actual number of found records
                $(".ui-pg-selbox option[value='ALL']").val(data.records);
                if ($(".ui-jqgrid").height() > $('#grid').getGridParam('maxHeight')) {
                    //resize our grid for the vertical scroll bar to eliminate the hortizontal scroll bar
                    $(".ui-jqgrid").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-bdiv").css("width", $('#grid').getGridParam('width') + 17);
                    $(".ui-jqgrid-hdiv").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-view").css("width", $('#grid').getGridParam('width') + 20);
                    $("#pager").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-hbox").css("padding-right", "16px");
                } else { //set everything to defaults
                    $(".ui-jqgrid").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-bdiv").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-hdiv").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-view").css("width", $('#grid').getGridParam('width'));
                    $("#pager").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-hbox").css("padding-right", "0px");
                }
}
0
Chris