JQgrid establecer altura de fila

Question

Estoy usando JqGrid con javascript. Establecería la altura de cada fila de la tabla, pero no he entendido cómo hacerlo.

Este es mi código:

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

} 
); 

}

Modificación RowHeight altura de las filas de valores no cambian. Este es el resultado de mi mesa

muchas gracias.

Answer 1

Puede establecer la altura de las filas individuales de jqGrid o de cualquier otra propiedad de CSS con la ayuda del método setRowData (consulte this wiki article). Esto se puede hacer por ejemplo en 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'); 
    } 
}); 

Se puede ver un working example here. Aquí puede ver que después de cambiar la altura de las filas, podría ser una buena idea cambiar la altura de la cuadrícula. Después de des-comentar la línea con el setGridHeight, los resultados se verán como this.

ACTUALIZACIÓN Sobre la base de la pregunta de comentario: Para cambiar la altura de la cabecera de la mesa con id = "lista" puede hacer lo siguiente:

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

El $("#gview_list") es un div sobre el cuerpo de la grilla y los encabezados de la grilla.

Puede ver los resultados here.

Answer 2

que resolvieron este establecimiento de esta norma en una hoja de estilo CSS tema:

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

Answer 3

Esto también funciona:

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

Answer 4

En el archivo ui.jqgrid.css cambiar la línea en la/* cuerpo */sección para esto:

.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: se cambia de pre t o nowrap.