jqGrid水平滚动条
Posted
技术标签:
【中文标题】jqGrid水平滚动条【英文标题】：jqGrid horizontal scrollbar 【发布时间】：2011-03-06 16:38:48 【问题描述】：我用 jQuery 和 jqGrid 开发了 AJAX 接口。
如何从我的 jqGrid 表中删除水平滚动条？
http://dskarataev.ru/jqgrid.png
如果我设置autowidth: true，那么我会得到表格的宽度 = 列的总宽度，但我需要表格的宽度 = 由函数 getSelectedTabHref() 返回 id 的父元素的宽度
所以我做函数：
$(window).bind('resize', function()
$('#tasks').setGridWidth($(getSelectedTabHref()).width());
$('#tasks').setGridHeight($(window).height()-190);
).trigger('resize');
这是我创建 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]
);
【问题讨论】：
【参考方案1】：我调整了 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;
评论是这样的，我只是使用overflow-x来隐藏水平滚动条，现在一切都很好。
【讨论】：
为什么这个问题不是第一个？它有 26 票，而且效果很好！谢谢！ 滚动条被隐藏，但同时最后一列的一部分也是不可见的。 我和@WillWu有同样的问题，我可以把右边框加回来` .ui-jqgrid .ui-jqgrid-bdiv position: relative;边距：0em；填充：0； /*溢出：自动；*/溢出-x：隐藏；溢出-y：自动；文本对齐：左；右边框：1px 实心#dddddd;`【参考方案2】：在某些情况下 jqGrid 计算的网格宽度不正确。您可以尝试增加cellLayout 参数（见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。如果您从 jqGrid 更改一些 CSS，则可能需要这样做。
在其他一些情况下，您可以更正我在Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog 中描述的函数fixGridWidth 或fixGridSize 的宽度。别忘了，你应该在 loadComplete 中使用它。
【讨论】：
【参考方案3】：在网格上设置显式width 并使用
autowidth: false,
shrinkToFit: true
【讨论】：
此解决方案并非适用于所有情况。改变 CSS 就行了。【参考方案4】：setGridWidth 肯定会将您的网格大小调整为给定的新宽度，但请确保将其与 autowidth=true 一起使用。 setGridWidth IE 7 左右可能有问题。
这里讨论了一些可行的解决方案（如果您还没有找到解决方案），
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/jqgridwiki/doku.php?id=wiki:options
"autowidth" : true
或
"shrinkToFit": false
要不把你的jqgrid代码贴出来，让我们分析一下。
【讨论】：
【参考方案5】：有点晚了，但可能对某人有用
表格的高度只能用数字设置，末尾不能有'px'
【讨论】：
【参考方案6】：我们去width : '1083', shrinkToFit:false,
当我们设置上述时，我们需要确保我们的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;
【讨论】：
【参考方案7】：很简单，在jqgrid中使用shrinkToFit: false
【讨论】：
【参考方案8】：将以下脚本添加到您的 style.css 将解决您的问题。
.ui-jqgrid .ui-jqgrid-bdiv
overflow-x:hidden !important;
overflow-y:auto !important;
【讨论】：
【参考方案9】：我使用了 jqgrid API 方法 setGridHeight。它在 IE 8 中也适用于我。
var gr = jq('#grid');
gr.setGridHeight(350,true);
我把这几行放在'loadComplete'函数调用下。
【讨论】：
【参考方案10】：将 AppearanceSettings ShrinkToFit="False" 和 AutoWidth="true" 应用到您的 jqGrid。
【讨论】：
【参考方案11】：这是我的做法，到目前为止，一切都很好。基本上，我们调整网格的大小以适应垂直滚动条，并且通过调整大小，没有水平溢出，因此，水平条永远不会出现。我们的单元格大小保持不变，最后一个单元格没有部分隐藏。
loadComplete: function (data)
//set our "ALL" select option to the actual number of found records
$(".ui-pg-selbox option[value='ALL']").val(data.records);
if ($(".ui-jqgrid").height() > $('#grid').getGridParam('maxHeight'))
//resize our grid for the vertical scroll bar to eliminate the hortizontal scroll bar
$(".ui-jqgrid").css("width", $('#grid').getGridParam('width') + 20);
$(".ui-jqgrid-bdiv").css("width", $('#grid').getGridParam('width') + 17);
$(".ui-jqgrid-hdiv").css("width", $('#grid').getGridParam('width') + 20);
$(".ui-jqgrid-view").css("width", $('#grid').getGridParam('width') + 20);
$("#pager").css("width", $('#grid').getGridParam('width') + 20);
$(".ui-jqgrid-hbox").css("padding-right", "16px");
else //set everything to defaults
$(".ui-jqgrid").css("width", $('#grid').getGridParam('width'));
$(".ui-jqgrid-bdiv").css("width", $('#grid').getGridParam('width'));
$(".ui-jqgrid-hdiv").css("width", $('#grid').getGridParam('width'));
$(".ui-jqgrid-view").css("width", $('#grid').getGridParam('width'));
$("#pager").css("width", $('#grid').getGridParam('width'));
$(".ui-jqgrid-hbox").css("padding-right", "0px");
【讨论】：
【参考方案12】：我在我的 jqgrid 中调整了这种类型的 CSS
.ui-jqgrid .ui-jqgrid-bdiv
position: relative;
margin: 0;
padding: 0;
overflow: auto;
text-align: left;
【讨论】：
【参考方案13】：这对我有用
<style type="text/css">
.ui-jqgrid-bdiv
overflow-x: hidden !important;
</style>
【讨论】：
以上是关于jqGrid水平滚动条的主要内容，如果未能解决你的问题，请参考以下文章
JQGrid当autowidth = true时，如何删除恼人的水平滚动条？ （在IE中）