Javascript JQgrid 设置行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3203402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQgrid set row height
提问by michele
I am using JqGrid with javascript. I would set the height of each table row but I have not understand how to do.
我在 JavaScript 中使用 JqGrid。我会设置每个表格行的高度，但我不明白该怎么做。
This is my code:
这是我的代码：
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);
}
}
);
}
}
Modifying RowHeight value rows height don't change. This is my table result
修改 RowHeight 值行高不会改变。这是我的表结果
Thanks a lot.
非常感谢。
回答by Oleg
You can set height of individual rows of jqGrid or any other CSS property with the help of setRowDatamethod (see this wiki article). You can do this for example in loadComplete:
您可以在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');
}
});
You can see a working example here. Here you can see that after changing the height of the rows it could be a good idea to change the height of the grid. After un-commenting the line with the setGridHeight, the results will looks like this.
您可以在此处查看工作示例。在这里您可以看到，在更改行的高度后，更改网格的高度可能是个好主意。用 取消注释该行后setGridHeight，结果将如下所示。
UPDATEBased on the question from comment: To change the height of the header of the table with id="list"you can do the following:
更新基于评论中的问题：要使用id="list"更改表标题的高度，您可以执行以下操作：
$("table.ui-jqgrid-htable", $("#gview_list")).css ("height", 30);
The $("#gview_list")is a div over the grid body and the grid headers.
这$("#gview_list")是网格主体和网格标题上的 div。
You can see results here.
您可以在此处查看结果。
回答by aloplop85
This also works:
这也有效：
.ui-jqgrid .ui-jqgrid-htable th {
height: 2em !important;
}
.ui-jqgrid tr.jqgrow td{
height: 1em !important;
}
回答by Sici
In the ui.jqgrid.cssfile change the line in the /* body */ section to this:
在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:is changed from preto nowrap.
white-space:由 更改pre为nowrap。
回答by diosney
I solved this issue setting this rule in a css stylesheet:
我解决了这个问题，在 css 样式表中设置了这个规则：
.grid .ui-jqgrid-htable th,
.grid .ui-jqgrid-btable .jqgrow td {
height: 3em !important;
}
