不必要的水平滚动条jqGrid

问题描述

在我的jqGrid（使用4.0.0版）中，我得到了不必要的水平滚动条，但同时也有垂直滚动条。仅在Chrome和Firefox中会出现此问题，而在Internet Explorer中不会发生。 表格宽度的计算似乎有些问题，因为水平滚动仅一个或两个像素。我将“ 0”用作宽度的表格属性。大约有八列，有些具有固定的宽度（很小），其他的则具有动态宽度。 完全禁用水平滚动不是解决方案，因为用户仍然可以扩大某些列，然后需要水平滚动条。但是最初，我希望它在需要以较小的屏幕显示表格时加载与表格宽度对齐的列和垂直滚动条。 下面是代码中的网格属性摘录

    $(\"#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，则问题可能还有另一个原因，但是我建议您搜索

table

，

td

或

th

的CSS定义。     ,我将此代码添加到CSS文件\“ ui.jqgrid.css \”，并且水平滚动条不再出现：

.ui-jqgrid .ui-jqgrid-btable
{
    table-layout: auto;
}

    ,对我而言，解决方法是在加载网格后执行以下操作：

$(\"#gridtofix\").closest(\'.ui-jqgrid-bdiv\').width($(\"#gridtofix\").closest(\'.ui-jqgrid-bdiv\').width() + 1);