JQgrid设置行高 [英] JQgrid set row height

问题描述

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

I am using JqGrid with javascript. I would set the height of each table row but I have not understand how to do.

这是我的代码：

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

Modifying RowHeight value rows height don't change. This is my table result

非常感谢。

推荐答案

你可以在 setRowData 方法的帮助下设置jqGrid或任何其他CSS属性的各行的高度（参见这篇wiki文章）。你可以在 loadComplete 中执行此操作：

You can set height of individual rows of jqGrid or any other CSS property with the help of setRowData method (see this wiki article). You can do this for example in 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 取消注释该行后，结果将类似于这个。

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.

更新根据评论中的问题：更改高度使用 id =list的表格标题可以执行以下操作：

UPDATE Based on the question from comment: To change the height of the header of the table with id="list" you can do the following:

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

$（＃gview_list）是网格主体和网格标题上的div。

The $("#gview_list") is a div over the grid body and the grid headers.

你可以看到结果这里。

这篇关于JQgrid设置行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！