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设置行高

回答

相关问题