JQgrid設置行高

我正在使用JqGrid與JavaScript。我會設置每個表格行的高度，但我不知道該怎麼做。JQgrid設置行高

這是我的代碼：

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

} 
);

}

修改的rowHeight值的行高度不會改變。這是我的表結果

enter image description here

非常感謝。

來源

2010-07-08 michele

你看到這篇文章：http://www.trirand.com/blog/?page_id=393/help/possible-row-height-bug-in-in-ie8/ – 2010-07-08 12:29:28

是的，但不適用於我 – michele 2010-07-08 14:37:28

您可以藉助setRowData方法（請參閱this wiki article）設置jqGrid或任何其他CSS屬性的各行高度。您可以在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'); 
    } 
});

你可以看到一個working example here。在這裏你可以看到，在改變行的高度後，改變網格的高度可能是一個好主意。在用setGridHeight取消註釋該行後，結果看起來像this。

UPDATE基於從評論的問題：要使用ID更改表的表頭的高度=「列表」你可以做到以下幾點：

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

的$("#gview_list")是一個div在網格體和網格標題上。

您可以看到結果here。

來源

2010-07-08 14:50:40 Oleg

謝謝你的作品，但如果我會改變頭表的高度？我該怎麼做？在此示例中，只修改了行數據高度。再次感謝您。 – michele 2010-07-08 15:57:42

我解決了這個問題，在CSS樣式表中設置這樣的規則：

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

來源

2012-09-22 19:27:35 diosney

這也適用於：

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

來源

2013-10-02 14:51:34 aloplop85

在ui.jqgrid.css文件更改線路中/ *體* /節這樣的：

.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:從pre T改爲o nowrap。

來源

2015-07-01 21:49:35 Sici

JQgrid設置行高

回答

相關問題