JQgrid设置行高

Question

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

谢谢！

- michele

---

你看到这篇文章了吗：http://www.trirand.com/blog/?page_id=393/help/possible-row-height-bug-in-in-ie8/ - Haim Evgi

Answer 1

你可以使用setRowData方法（详见这篇维基文章）来设置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');
    }
});

你可以在这里看到一个实际的例子。在此，您可以看到更改行高后将网格高度也更改为较好的选择。取消注释带有setGridHeight行的结果将如此处所示。

更新 根据评论问题：要更改具有id="list"的表头的高度，您可以执行以下操作：

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

< p > $("#gview_list") 是一个覆盖在网格主体和网格标题上的 div。 < p > 您可以在这里查看结果。

- Oleg

---

谢谢，它可以工作了。但是如果我想改变表头的高度呢？我该怎么做？ 使用这个例子只能修改行数据的高度。再次感谢您。 - michele

Answer 2

这也是有效的：

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

- aloplop85

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。

- Sici

Answer 4

我通过在CSS样式表中设置以下规则来解决了这个问题：

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

- Diosney