jqgrid样式修改

1.单元格内的文本自动换行 

加入样式:

 

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding-top:2px;
}

具体说明可参阅: http://blog.qumsieh.ca/2009/12/03/jqgrid-textword-wrapping/

2.保持显示垂直滚动条和水平滚动条

在IE中记录比较少的时候,默认情况下不显示垂直滚动条,会出现标题行与数据行位置对不齐的情况,通过保持显示垂直滚动条可以解决这个问题

$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });

需要保持水平滚动条,则:

    $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' });


在目前使用的 jqgrid 3.6 版本中,当 IE 浏览器中网格宽度超过容器的水平宽度时,高度即使设置为 auto,也会同时出现水平滚动条和垂直滚动条,感觉非常难受。此时,只要保持水平滚动条,即可解决这个问题

3.控制列的水平宽度

 

当表字段比较多时,如果按照colModel指定的宽度,整个jqGrid宽度会太宽,我们通常希望控制一下grid的宽度,并同时保持各列的指定宽度。

可以指定jgrid的参数 shrinkToFit:false 。shrinkToFit属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度。

同时需要控制jqgrid的宽度。通过autowidth:true属性可以达到目地。

4. 高度随记录数自动变化.

 

使用 height: 'auto' 参数 .

 

不理想的是,在IE6中,当字段比较多并出现水平滚动条时,感觉会比较难受。参考保持垂直滚动条的办法,保持一个水平滚动条,高度是对了




你可能感兴趣的:(jqgrid样式修改)