jQuery jqGrid 水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3091200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid horizontal scrollbar
提问by dskarataev
I developed AJAX interface with jQuery and jqGrid.
我用 jQuery 和 jqGrid 开发了 AJAX 接口。
How I can remove horizontal scrollbar from my jqGrid table?
如何从 jqGrid 表中删除水平滚动条？
http://dskarataev.ru/jqgrid.png
http://dskarataev.ru/jqgrid.png
If I set autowidth: true, then I get width of table = sum width of columns, but I need width of table = width of parent element with id returned by function getSelectedTabHref()
如果我设置autowidth: true，那么我得到表格宽度 = 列总宽度，但我需要表格宽度 = 父元素的宽度，id 由函数返回getSelectedTabHref()
so I make function:
所以我制作功能：
$(window).bind('resize', function() {
$('#tasks').setGridWidth($(getSelectedTabHref()).width());
$('#tasks').setGridHeight($(window).height()-190);
}).trigger('resize');
and here is how I create jqGrid table:
这是我创建 jqGrid 表的方法：
$('#tasks').jqGrid({
datatype: 'local',
colNames:[labels['tasksNum'],labels['tasksAdded']+"/"+labels['tasksAccepted'],labels['tasksOperator'],labels['tasksClient'],labels['tasksManager'],labels['tasksDesc']],
colModel :[
{name:'taskId', index:'taskId', width:1, align:'right'},
{name:'taskAdded', index:'taskAdded', width:3},
{name:'taskOperator', index:'taskOperator', width:4},
{name:'taskClient', index:'taskClient', width:7},
{name:'taskManager', index:'taskManager', width:4},
{name:'taskDesc', index:'taskDesc', width:8}]
});
回答by Herman van der Blom
i adjusted ui.grid.css because i did not need a horizontal scrollbar at all. i did this:
我调整了 ui.grid.css 因为我根本不需要水平滚动条。我这样做了：
.ui-jqgrid .ui-jqgrid-bdiv {
position: relative;
margin: 0em;
padding:0;
/*overflow: auto;*/
overflow-x:hidden;
overflow-y:auto;
text-align:left;
}
the commented was how it was, i just used overflow-x to hide the horizontal scrollbar and now all is fine with me.
评论是怎么回事，我只是使用了溢出-x 来隐藏水平滚动条，现在一切都很好。
回答by Oleg
There are some situations where jqGrid calculate the grid width incorrect. You can try to increase cellLayoutparameter (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). This may be needed if you change some CSS from jqGrid.
有一些情况 jqGrid 计算网格宽度不正确。您可以尝试增加cellLayout参数（参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。如果您从 jqGrid 更改一些 CSS，则可能需要这样做。
In some other situations you can correct the width with respect of the function fixGridWidthor fixGridSizewhich I have described in Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog. Don't forget, that you should use it inside of loadComplete.
在其他一些情况下，您可以更正与函数相关的宽度，fixGridWidth或者fixGridSize我在jQueryUI Dialog 内的 jqGrid 上正确调用 setGridWidth 中描述 的宽度。不要忘记，您应该在loadComplete.
回答by arviman
Set an explicit widthon the grid and use
width在网格上设置显式并使用
autowidth: false,
shrinkToFit: true
回答by Prem Rajendran
setGridWidth will definitely resize your grid to that of the given new width, but make sure you use it with autowidth=true. setGridWidth may have problem with IE 7 or so.
setGridWidth 肯定会将您的网格大小调整为给定的新宽度，但请确保将它与 autowidth=true 一起使用。setGridWidth 可能在 IE 7 左右有问题。
Some working solutions discussed here (in case if you are yet to find a solution),
此处讨论了一些可行的解决方案（以防万一您还没有找到解决方案），
Resize jqGrid when browser is resized?
http://www.trirand.com/blog/?page_id=393/discussion/browser-resize-how-to-resize-jqgrid/
http://www.trirand.com/blog/?page_id=393/discussion/browser-resize-how-to-resize-jqgrid/
----old----
- - 老的 - -
There are couple of options you can try,
您可以尝试几种选择，
From http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
来自http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
"autowidth" : true
or
或者
"shrinkToFit": false
Otherwise post your jqgrid code, let us analyze.
否则发布您的jqgrid代码，让我们分析。
回答by Agustin Baez
a bit late, but might be useful for someone
有点晚了，但可能对某人有用
You must set the height of the table only in numbers, without 'px' at the end
您必须仅用数字设置表格的高度，最后不要设置 'px'
回答by kiran vennampelli
Here we go width : '1083', shrinkToFit:false,
我们开始width : '1083'，shrinkToFit:false,
When we set the above we need to make sure that our ui.jqgird.cssare set as below
当我们设置上述内容时，我们需要确保我们ui.jqgird.css的设置如下
.ui-jqgrid .ui-jqgrid-bdiv { height: auto; margin: 0em; max-height: 250px; overflow-x: auto; overflow-y: auto; padding: 0px; position: relative; text-align: left; }
回答by Hari Prasad Ranganathan
Add the below script to your style.css will resolve your issue.
将以下脚本添加到您的 style.css 将解决您的问题。
.ui-jqgrid .ui-jqgrid-bdiv {
overflow-x:hidden !important;
overflow-y:auto !important;
}
回答by Foram Thakral
I adjust this type of CSS in my jqgrid
我在 jqgrid 中调整了这种类型的 CSS
.ui-jqgrid .ui-jqgrid-bdiv {
position: relative;
margin: 0;
padding: 0;
overflow: auto;
text-align: left;
}
回答by emon
This works for me
这对我有用
<style type="text/css">
.ui-jqgrid-bdiv {
overflow-x: hidden !important;
}
</style>
回答by cavalsilva
Its simple, use in the jqgrid shrinkToFit: false
很简单，在jqgrid中使用 shrinkToFit: false
