Jquery 不必要的水平滚动条jqGrid
在我的jqGrid(使用版本4.0.0)中,我得到了一个不必要的水平滚动条,但也有一个垂直滚动条。这个问题只发生在Chrome和Firefox中,而不会发生在Internet Explorer中 似乎表格宽度的计算有问题,因为水平滚动只有一两个像素。我使用Jquery 不必要的水平滚动条jqGrid,jquery,jqgrid,Jquery,Jqgrid,在我的jqGrid(使用版本4.0.0)中,我得到了一个不必要的水平滚动条,但也有一个垂直滚动条。这个问题只发生在Chrome和Firefox中,而不会发生在Internet Explorer中 似乎表格宽度的计算有问题,因为水平滚动只有一两个像素。我使用autowidth:true作为宽度的表属性。大约有八列,一些列具有固定宽度(非常小),另一些列具有动态宽度 禁用水平滚动根本不是解决方案,因为用户仍然可以放大某些列,然后需要一个水平滚动条。但最初我希望它加载与表格宽度对齐的列,并在需要在较小
autowidth:true
作为宽度的表属性。大约有八列,一些列具有固定宽度(非常小),另一些列具有动态宽度
禁用水平滚动根本不是解决方案,因为用户仍然可以放大某些列,然后需要一个水平滚动条。但最初我希望它加载与表格宽度对齐的列,并在需要在较小屏幕上显示表格时使用垂直滚动条
下面是代码中网格属性的练习
$("#grid").jqGrid({
datatype: 'json',
mtype: 'POST',
colNames:loadColumns(columns)[0],
colModel:loadColumns(columns)[1],
height: $(window).height() - 160,
rownumbers: false,
pager: '#pager',
rowNum:25,
rowList:[25,50,100],
sortname: 'invid',
sortorder: 'desc',
viewrecords: true,
autowidth: true,
beforeSelectRow: function(){
return false;
},
});
您应该验证CSS中没有表的某些设置 例如,在我的建议中,我描述了ASP.NET MVC项目的标准CSS(所有版本从1.0到3.0)包括以下设置:
table
{
border: solid 1px #e8eef4;
border-collapse: collapse;
}
table td
{
padding: 5px;
border: solid 1px #e8eef4;
}
计算最佳网格宽度时,不会考虑此设置。如果删除设置或添加以下附加设置
div.ui-jqgrid-view table.ui-jqgrid-btable
{
border-style:none;
border-top-style:none;
border-collapse:separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable td
{
border-left-style:none
}
div.ui-jqgrid-view table.ui-jqgrid-htable
{
border-style:none;
border-top-style:none;
border-collapse:separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable th
{
border-left-style:none
}
水平滚动条的问题将得到解决
如果您不使用ASP.NET MVC,您的问题可能还有另一个原因,但我建议您为
表
、td
或th
搜索CSS的任何定义。对于我来说,加载网格后的解决方案通常是这样的:
$("#gridtofix").closest('.ui-jqgrid-bdiv').width($("#gridtofix").closest('.ui-jqgrid-bdiv').width() + 1);
我将此代码添加到CSS文件“ui.jqgrid.CSS”中,水平滚动条不再显示:
.ui-jqgrid .ui-jqgrid-btable
{
table-layout: auto;
}
谢谢你的快速反应。我确实在使用ASP.NET MVC,但不幸的是,您的解决方案没有解决我的问题,即使新属性得到了正确应用(必须使用!对某些人来说很重要)。另外,您提供的链接上的其他解决方案也无法解决此问题。但是问题总是来自CSS样式的问题?欧文:我只是想重现你的问题。我使用了来自的MVC示例,添加了
autowidth:true
,所有这些都没有滚动条。然后我更新到jqGrid 4.0,所有的工作都和以前一样。因此,可能您的测试不正确,或者您有一些附加的CSS不是ASP.NET MVC的标准。这将删除滚动条,但使列名和表数据不对齐。我将相同的规则添加到ui jqgrid.ui jqgrid htable,并修复了不对齐问题。