JQgrid ustaw wysokość wiersza

Question

Używam JqGrid z javascript. Ustawiłbym wysokość każdego wiersza tabeli, ale nie rozumiem, jak to zrobić.

To jest mój kod:

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

} 
); 

}

Modyfikacja rowHeight rzędy wartość wysokości nie zmieni. To jest mój wynik stół

dzięki.

Answer 1

Można ustawić wysokość pojedynczych wierszy jqGrid lub dowolnej innej właściwości CSS za pomocą metody setRowData (patrz setRowData) (patrz setRowData). Można to zrobić na przykład w 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'); 
    } 
}); 

można zobaczyć working example here. Tutaj widać, że po zmianie wysokości rzędów dobrym pomysłem może być zmiana wysokości siatki. Po usunięciu komentarza z linii setGridHeight, wyniki będą wyglądały jak this.

UPDATE Bazując na pytanie komentarz: Aby zmienić wysokość nagłówku tabeli z id = „list” można wykonać następujące czynności:

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

$("#gview_list") jest div nad korpusem siatki i nagłówkami siatki.

Wyniki można zobaczyć here.

Answer 2

Rozwiązałem to ustawienie tej reguły w arkuszu stylów css problem:

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

Answer 3

Działa to również:

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

Answer 4

w pliku ui.jqgrid.css zmienić linię w/* ciała */sekcji do to:

.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: zmienia się z pre t o nowrap.