JQgrid set row height

Question

Sto usando JqGrid con javascript. Imposterei l'altezza di ogni riga della tabella ma non ho capito come fare.

Questo è il mio codice:

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); 
    } 

} 
); 

}

Modifica RowHeight filari valore di altezza non cambiano. Questo è il mio risultato tavolo

Grazie mille.

Answer 1

È possibile impostare l'altezza delle singole righe di jqGrid o di qualsiasi altra proprietà CSS con l'aiuto del metodo setRowData (vedere this wiki article). È possibile farlo, ad esempio in 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'); 
    } 
}); 

Potete vedere una working example here. Qui puoi vedere che dopo aver cambiato l'altezza delle file potrebbe essere una buona idea cambiare l'altezza della griglia. Dopo aver annullato il commento della riga con setGridHeight, i risultati saranno simili a this.

UPDATE Sulla base della domanda da un commento: Per modificare l'altezza dell'intestazione del tavolo con id = "lista" è possibile effettuare le seguenti operazioni:

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

Il $("#gview_list") è un div sopra il corpo della griglia e le intestazioni della griglia.

È possibile visualizzare i risultati here.

Answer 2

Ho risolto questo l'impostazione di questa regola in un foglio di stile css problema:

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

Answer 3

Questo funziona anche:

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

Answer 4

Nel file ui.jqgrid.css modificare la riga nel/* corpo */sezione per questo:

.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: passa da pre t o nowrap.