jqgrid rtl水平滚动条问题

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]);
    });

这是问题的图片:

任何帮助将被批准,

提前致谢.

Answer 1

尝试验证Google Chrome或Safari网络浏览器中是否存在水平滚动条的问题.如果在浏览器中你没有水平滚动条,你所遇到的问题与我在这里描述的相同.

jqGrid的错误宽度计算问题shrinkToFit:false.我修复bug的建议是在GitHub上的jqGrid代码中实现的,并且肯定会在下一个jqGrid版本的代码中实现.因此,您可以尝试从GitHub使用 jqGrid的开发人员(非最小化)版本,或者width像我在错误报告中描述的那样显式设置网格的正确性.

还有一个解决方法:您可以根据fixGridWidth我在此处发布的代码来修复网格宽度.

更新:我再一次看了这个问题,并且可以说你的问题主要来自jqGrid中的bug,如果shrinkToFit:false使用的话.更改了一行jqGrid代码(修复bug后)和jqGrid定义中的微小更改后,网格将如下

你可以看到它住在这里.相应的代码是

$(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忽略.
• 在autowidth: true使用的情况下,jqGrid参数在我看来并不好shrinkToFit: false,因为它将跟随网格宽度的变化.因此,您将在网格中具有水平滚动条,autowidth: true或者您将有许多可用空间作为网格的一部分.
• 明确地设置网格高度height: '120px'而不是height: 'auto'也可以跟随垂直滚动条,它将采用网格宽度.所以也可以看到水平条.

更新:我建议另外从评论中查看演示和这个.

更新2:免费jqGrid中不存在这样的问题.