Question

当我调整网格大小并显示水平滚动条时，我看到标题中有一个额外的空格，但我仍然在其他网格列上看到它。我想在最左边的列上看到这个滚动条。

这是我的代码：

$(function()
    {               
        $("#gridTable").jqGrid(
        {
            editurl: "clientArray",
            direction:"rtl",
            datatype: "local",
            colNames:['Code1','Code2', 'Code3', 'Code4','Code5','Code6','Code7','Code8','Code9'],
            colModel:[
                                        {name:'code1',index:'code1', width:60, sorttype:"int" , editable:true, edittype:'text'},
                                        {name:'code2',index:'code2', width:150, sorttype:"date" , editable:true, edittype:'text'},
                                        {name:'code3',index:'code3', width:150 , editable:true, edittype:'text'},
                                        {name:'code4',index:'code4', width:80,  sorttype:"float" , editable:true, edittype:'text'},
                                        {name:'code5',index:'code5', width:80, sorttype:"float" , editable:true, edittype:'text'},
                                        {name:'code6',index:'code6', width:80, sorttype:"float" , editable:true, edittype:'text'},
                                        {name:'code7',index:'code7', width:80, sortable:false , editable:true, edittype:'text'},
                                        {name:'code8',index:'code8', width:80, sorttype:"float" , editable:true, edittype:'text'},
                                        {name:'code9',index:'code9',  sorttype:"float" , editable:true, edittype:'text'},
                                  ],                
            height: '120px' ,
             scrolling: true,
            autowidth: true,
            shrinkToFit: false                
          });

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

          var mydata = [
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
    ];

            for(var i=0;i<=mydata.length;i++)
                    jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
    });

这是问题的图片： enter image description here

任何帮助都将获得批准，

提前感谢。

Answer 1

尝试验证Google Chrome或Safari网络浏览器中是否存在水平滚动条的问题。如果在浏览器中您没有水平滚动条，那么您所遇到的问题与我所描述的here相同。

shrinkToFit:false情况下jqGrid的宽度计算错误的问题。我修复bug的建议是在GitHub的jqGrid代码中实现的，并且肯定会在下一个jqGrid版本的代码中实现。因此，您可以尝试使用GitHub中的jqGrid的开发人员（非最小化）版本，或者像我在the bug report中所描述的那样明确设置网格的正确width。

还有一个解决方法：您可以使用我发布的here代码的fixGridWidth函数来修复网格宽度。

更新：我再次查看了这个问题，可以说你的问题主要来自于shrinkToFit:false使用情况下jqGrid中的错误。更改了一行jqGrid代码（修复bug后）和jqGrid定义中的微小更改后，网格将如下

enter image description here

你可以看到它here。相应的代码是

$(function() {
    var mydata = [
       {id:"1",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"2",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"3",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"4",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"5",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"6",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"7",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}
    ];
    $("#gridTable").jqGrid({
        editurl: "clientArray",
        direction:"rtl",
        datatype: "local",
        data: mydata,
        colNames:['Code1','Code2', 'Code3', 'Code4','Code5','Code6','Code7','Code8','Code9'],
        colModel:[
            {name:'code1',index:'code1', width:60, sorttype:"int", editable:true},
            {name:'code2',index:'code2', width:150, sorttype:"date", editable:true},
            {name:'code3',index:'code3', width:150, editable:true},
            {name:'code4',index:'code4', width:80, sorttype:"float", editable:true},
            {name:'code5',index:'code5', width:80, sorttype:"float", editable:true},
            {name:'code6',index:'code6', width:80, sorttype:"float", editable:true},
            {name:'code7',index:'code7', width:80, sortable:false, editable:true},
            {name:'code8',index:'code8', width:80, sorttype:"float", editable:true},
            {name:'code9',index:'code9', sorttype:"float", editable:true}
        ],
        height: 'auto',
        shrinkToFit: false
    });
});

该代码修复了代码中的小错误，并针对data参数而非addRowData的使用进行了最小化优化。代码中的小错误如下：

在mydata初始化结束时你在']'之前有逗号，这是语法错误。您在colModel的定义中遇到的错误相同。您应该在']'之前删除两个逗号。在使用data的情况下，严格建议在id数组中的每个项的定义中包含额外的mydata属性。 id将定义相应的行ID。
在循环for(var i=0;i<=mydata.length;i++)中，您将尝试访问未定义的元素mydata[mydata.length]。循环应更改为for(var i=0;i<mydata.length;i++)。更好的方法是使用data参数填充网格（参见上面的代码）。
所有列中使用的参数edittype:'text'都是默认值，因此您可以将其删除。
不存在jqGrid参数scrolling: true，它将被jqGrid忽略。
jqGrid参数autowidth: true在我和shrinkToFit: false一起使用的情况下似乎不太好，因为它会跟随网格宽度的变化。因此，由于autowidth: true，您将在网格中具有水平滚动条，或者您将有许多可用空间作为网格的一部分。
明确设置网格高度，如height: '120px'而不是height: 'auto'，也可以跟随垂直滚动条，它将采用网格宽度。所以也可以看到横条。

更新：我建议您另外从the demo查看this one和the comment。

更新2 ：free jqGrid中不存在此类问题。

jqgrid rtl水平滚动条问题

1 个答案: