JQgrid set row height

Question

J'utilise JqGrid avec javascript. Je définirais la hauteur de chaque rangée de table mais je n'ai pas compris comment faire.

Ceci est mon code:

function jobList(){ 
var json=doShowAll(); 
alert("jobList() ==> php/get_job_status.php?value="+json); 
jQuery("#jobList").jqGrid({ 
    url:'php/get_job_status.php?value='+json, 
datatype: "xml", 
    colNames:['id','title', 'start', 'stop','completed'], 
    colModel:[ 
    {name:'id',index:'id', width:15,hidden:true, align:"center"}, 
    {name:'title',index:'title', width:150, align:"center"}, 
    {name:'start',index:'start', width:350, align:"center", sorttype:"date"}, 
    {name:'fine',index:'fine', width:350, align:"center", sorttype:"date"}, 
    {name:'completed',index:'completed', width:120, align:"center",formatter:highlight},//il solitoformatter:infractionInFormatter}, 
    ], 
    //rowNum:8, 
    //rowList:[8,10,20,30], 
    pager: '#pagerJobList', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
multiselect: false, 
subGrid: false, 
autowidth: true, 
height: 250, 
rowheight: 300, 

caption: "Job Progress", 
    afterInsertRow: function(rowid, aData){ 
    jQuery("#jobList").jqGrid('setCell', rowid, 'completed', '', { 
     background: 'red', 
    color: 'white' 
    }); 
    }, 
    onSelectRow: function(id){ 
     //alert(id); 
     var title=""; 
     if (id) { 
     var ret = jQuery("#jobList").jqGrid('getRowData',id); 
     title=ret.id; 
     //alert(title); 
     } 
     else { 
     alert("Please select row"); 
     } 
     var json2=doShowAll(); 
     subGrid(json2,title); 
    } 

} 
); 

}

hauteur rows Modification de la valeur RowHeight ne changent pas. Ceci est mon résultat de table

de Merci beaucoup.

Answer 1

Vous pouvez définir la hauteur de lignes individuelles de jqGrid ou de toute autre propriété CSS à l'aide de la méthode setRowData (voir this wiki article). Vous pouvez le faire par exemple dans loadComplete:

$("#list").jqGrid({ 
    // ... 
    loadComplete: function() { 
     var grid = $("#list"), 
      ids = grid.getDataIDs(); 

     for (var i = 0; i < ids.length; i++) { 
      grid.setRowData(ids[i], false, { height : 20 + (i * 2) }); 
     } 

     // grid.setGridHeight('auto'); 
    } 
}); 

Vous pouvez voir un working example here. Ici vous pouvez voir qu'après avoir changé la hauteur des rangées, il peut être judicieux de changer la hauteur de la grille. Après avoir commenté la ligne avec le setGridHeight, les résultats ressembleront à this.

MISE À JOUR Sur la base de la question du commentaire: Pour modifier la hauteur de l'en-tête de la table avec id = « liste » vous pouvez effectuer les opérations suivantes:

$("table.ui-jqgrid-htable", $("#gview_list")).css ("height", 30); 

Le $("#gview_list") est un div sur le corps de la grille et les en-têtes de la grille.

Vous pouvez voir les résultats here.

Answer 2

Je résolu cette question la définition de cette règle dans une feuille de style CSS:

.grid .ui-jqgrid-htable th, 
.grid .ui-jqgrid-btable .jqgrow td { 
    height: 3em !important; 
} 

Answer 3

Cela fonctionne aussi:

.ui-jqgrid .ui-jqgrid-htable th { 
    height: 2em !important; 
} 
.ui-jqgrid tr.jqgrow td{ 
    height: 1em !important; 
} 

Answer 4

Dans le fichier ui.jqgrid.css changer la ligne dans le répertoire/* corps */section ceci:

.ui-jqgrid tr.jqgrow td { 
    font-weight: normal; 
    overflow: hidden; 
    white-space: nowrap; 
    height: 22px; 
    padding: 0 2px 0 2px; 
    border-bottom-width: 1px; 
    border-bottom-color: inherit; 
    border-bottom-style: solid; 
} 

white-space: passe de pre t o nowrap.