JQgrid设置行高

Posted 2023-03-06

【中文标题】JQgrid设置行高

【英文标题】：JQgrid set row height

【发布时间】：2011-03-13 07:35:58

【问题描述】：

我正在使用带有 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 值行高不会改变。 这是我的表格结果

非常感谢。

【问题讨论】：

你看到这个帖子了吗：trirand.com/blog/?page_id=393/help/…

【参考方案1】：

您可以在setRowData 方法的帮助下设置jqGrid 或任何其他CSS 属性的各个行的高度（参见this wiki article）。例如，您可以在 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。

更新基于评论中的问题：要使用 id="list" 更改表格标题的高度，您可以执行以下操作：

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

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

你可以看到结果here。

【讨论】：

谢谢它的工作，但如果我要改变头桌的高度？我该怎么做？在此示例中，仅修改了行数据高度。再次感谢您。

【参考方案2】：

这也有效：

.ui-jqgrid .ui-jqgrid-htable th 
    height: 2em !important;

.ui-jqgrid tr.jqgrow td
    height: 1em !important;

【参考方案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。

【参考方案4】：

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

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