JQgrid设置行高

我正在使用jqGrid和javascript。 我会设置每个表行的高度，但我不明白该怎么做。

这是我的代码：

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值行高度不会更改。 这是我的表结果

非常感谢。

Answer 1

您可以在setRowData方法的帮助下设置jqGrid或任何其他CSS属性的各个行的高度（请参阅此Wiki文章 ）。 例如，您可以在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'); } }); 

你可以在这里看到一个有效的例子 。 在这里你可以看到，在改变行的高度后，最好改变网格的高度。 在使用setGridHeight取消注释该行setGridHeight ，结果将如下所示 。

更新根据评论中的问题：要更改id =“list”的表格标题的高度，您可以执行以下操作：

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

$("#gview_list")是网格主体和网格标题上的div。

你可以在这里看到结果。

Answer 2

这也有效：

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

Answer 3

在ui.jqgrid.css文件中，将/ * body * /部分中的行更改为：

 .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更改为nowrap 。

Answer 4

我解决了这个问题，在css样式表中设置此规则：

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