我用jQuery和jqGrid开发了AJAX接口。
如何从jqGrid表中删除水平滚动条？
http://dskarataev.ru/jqgrid.png
如果我设置autowidth: true，那么我得到table的宽度=列的总宽度，但我需要table = table父元素的宽度，函数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}]
});
我调整了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来隐藏水平滚动条，现在一切都很好。
它简单，用于jqgrid shrinkToFit: false
这是我如何做到这一点，到目前为止，这么好。基本上，我们调整网格大小以适应垂直滚动条，并且通过调整大小，没有水平溢出，因此，水平条从不显示。我们的细胞大小保持不变，最后一个细胞不是部分隐藏的。
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");
}
}
我在jqgrid中调整了这种类型的CSS
.ui-jqgrid .ui-jqgrid-bdiv {
position: relative;
margin: 0;
padding: 0;
overflow: auto;
text-align: left;
}
在某些情况下，jqGrid计算网格宽度不正确。您可以尝试增加cellLayout参数（请参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。如果从jqGrid更改某些CSS，则可能需要这样做。
在其他一些情况下，您可以根据我在fixGridWidth中描述的函数fixGridSize或Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog来修正宽度。别忘了，你应该在loadComplete里面使用它。
在网格上设置一个显式的width并使用
autowidth: false,
shrinkToFit: true
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代码，让我们分析一下。
有点晚，但可能对某人有用
您必须仅以数字设置表格的高度，最后不要设置“px”
在这里，我们去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; }
将以下脚本添加到style.css将解决您的问题。
.ui-jqgrid .ui-jqgrid-bdiv {
overflow-x:hidden !important;
overflow-y:auto !important;
}
我使用了jqgrid API方法setGridHeight。它在IE 8中也适用于我。
var gr = jq('#grid');
gr.setGridHeight(350,true);
我把这些行放在'loadComplete'函数调用下。
将AppearanceSettings ShrinkToFit="False"和AutoWidth="true"应用到你的jqGrid。