将固定列宽设置为JQGrid

时间:2013-03-05 21:45:13

标签: jquery css jqgrid

有没有办法为Jqgrid设置固定的列宽和高度。

我将jqgrid css更改为

.ui-jqgrid tr.jqgrow td {vertical-align:text-top;font-weight: normal; overflow: hidden; white-space:pre-wrap; height: 20px !important;padding: 0 2px 0 2px;border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: solid;}

但是这并没有将高度设置为20px。

我还需要将所有行设置为特定高度,如果大小超过列的大小,则应删除列中的数据,并将鼠标悬停在列上以显示整个数据。

以下是我的colName和模型

ColNameData = ['Date', 'Fund', 'Partner', 'Menu', 'Sub Menu', 'Document Name', 'Document Description', 'Type', 'ID'];
                     ColModelData = [{ name: 'MessageDate',
                         align: 'right',
                         sorttype: 'date',
                         datefmt: 'm/d/Y',
                         width :10,resizable:false
                          },
                                    { name: 'Fund', align: 'left',width : 8, resizable:false},
                                    { name: 'Partner', align: 'left',width : 7,resizable:false },
                                    { name: 'Menu', align: 'left',width : 9,resizable:false },
                                    { name: 'SubMenu', align: 'left',width : 9,resizable:false},
                                    { name: 'Documentname', align: 'left',width : 35,resizable:false },
                                    { name: 'DocumentDescription', align: 'left',width : 35,resizable:false },
                                    { name: 'Type', align: 'left',width : 5,resizable:false},
                                    { name: 'ID', hidden: true, resizable: false }
                                   ];

4 个答案:

答案 0 :(得分:3)

这对我来说非常好(在渲染jqgrid之后调用)

function reDefineColWidth(){
    var columnWidths = '65px|88px|175px|140px|200px|75px|140px|150px|130px|220px|125px|230px|200px|111px'
    var widthsArr = columnWidths.split('|');
    for(var j=0; j < widthsArr.length ; j++ ){
        $('.ui-jqgrid-labels > th:eq('+j+')').css('width',widthsArr[j]); // will set the column header widths
        $('#grid tr').find('td:eq('+j+')').each(function(){$(this).css('width',widthsArr[j]);}) // will set the column widths
    }
}

答案 1 :(得分:2)

jqgrid属性中,您会发现jqgrid的宽度和高度可以由属性widthheight设置为here。这同样适用于jqgrid的每一行。

{ name: 'Fund', align: 'left',width : 8, height:20, resizable:false}

上述行会将此单元格的高度设置为20 px。因此,您可以设置所有列的height参数,以确保行的高度为20 px

答案 2 :(得分:2)

您可以使用colModel中的固定选项

fixed: true
列的

属性(请参阅docs

答案 3 :(得分:1)

归功于neel和Ajo。在jqGrid 4.5.4中,我发现在将整个网格的autowidth设置为true时,将colizable都应用于false,并在colModel中的列上固定为true。

{ name: 'fund', width: 8, height: 20, resizable: false, fixed: true }

不能确认将来的版本。