Question

我用jQuery和jqGrid开发了AJAX接口。

如何从jqGrid表中删除水平滚动条？

如果我设置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}]
});

Answer 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来隐藏水平滚动条，现在一切都很好。

Answer 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内使用它。

Answer 3

在网格上设置显式width并使用

autowidth: false,
shrinkToFit: true

Answer 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代码，让我们分析。

Answer 5

有点晚，但可能对某人有用

您必须仅以数字设置表格的高度，最后不要设置“px”

Answer 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; }

Answer 7

将以下脚本添加到样式中。css将解决您的问题。

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-x:hidden !important; 
    overflow-y:auto !important;
}

Answer 8

我使用了jqgrid API方法setGridHeight。它在IE 8中也适用于我。

var gr = jq('#grid');
gr.setGridHeight(350,true);

我把这些行放在'loadComplete'函数调用下。

Answer 9

将外观设置 ShrinkToFit="False"和AutoWidth="true"应用到jqGrid。

Answer 10

简单，在jqgrid中使用shrinkToFit: false

Answer 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");
                }
}

Answer 12

我在jqgrid中调整了这种类型的CSS

.ui-jqgrid .ui-jqgrid-bdiv {
 position: relative;
 margin: 0;
 padding: 0;
 overflow: auto;
 text-align: left;
}

Answer 13

这对我有用

 <style type="text/css">
    .ui-jqgrid-bdiv {
        overflow-x: hidden !important;
    }
 </style>

jqGrid水平滚动条

13 个答案: