jqGrid水平滚动条

Question

我使用 jQuery 和 jqGrid 开发了 AJAX 界面。

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

http://dskarataev.ru/jqgrid.png

如果我设置 autowidth: true，然后我得到表的宽度=列的总宽度，但是我需要表的宽度=父元素的宽度，其id由函数getSelectedTabHref()返回，

所以我创建了函数：

$(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，则可能需要这样做。

在其他一些情况下，您可以使用我在 在 jQueryUI 对话框内的 jqGrid 上正确调用 setGridWidth。不要忘记，您应该在 loadComplete 内部使用它。

Answer 3

在网格上设置显式宽度并使用

autowidth: false,
shrinkToFit: true

Answer 4

setGridWidth 肯定会将网格大小调整为给定的新宽度，但请确保将其与 autowidth=true 一起使用。 setGridWidth 在 IE 7 左右可能有问题。

这里讨论了一些可行的解决方案（如果您还没有找到解决方案），

调整 jqGrid 的大小当浏览器调整大小时？

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'，shr​​inkToFit：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

很简单，在jqgrid中使用 shr​​inkToFit: false

Answer 8

将以下脚本添加到您的 style.css 将解决您的问题。

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

Answer 9

这对我有用

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

Answer 10

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

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

我将此行放在“loadComplete”函数调用下。

Answer 11

将 AppearanceSettings ShrinkToFit="False" 和 AutoWidth="true" 应用于您的 jqGrid。

Answer 12

这就是我的做法，到目前为止，效果很好。基本上，我们调整网格大小以适应垂直滚动条，并且通过调整大小，不会出现水平溢出，因此水平滚动条永远不会显示。我们的单元格大小保持不变，并且最后一个单元格没有部分隐藏。

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 13

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

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