32

我用 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}]
});

4

13 回答 13

76

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

于 2011-02-08T14:59:29.503 回答
5

在某些情况下，jqGrid 计算的网格宽度不正确。您可以尝试增加cellLayout参数（参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。如果您从 jqGrid 更改一些 CSS，则可能需要这样做。

在其他一些情况下，您可以更正函数的宽度，fixGridWidth或者fixGridSize我在 正确调用 setGridWidth on a jqGrid inside a jQueryUI Dialog中描述的函数。不要忘记，您应该在loadComplete.

于 2010-06-22T08:11:14.640 回答
4

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

autowidth: false,
shrinkToFit: true
于 2011-03-09T21:18:20.343 回答
1

很简单，在jqgrid中使用shrinkToFit: false

于 2014-01-22T12:18:22.630 回答
1

我们走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; }
于 2013-05-28T04:10:33.147 回答
1

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

您必须仅以数字设置表格的高度，末尾没有“px”

于 2012-02-07T14:08:56.673 回答
1

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

于 2010-06-22T07:59:14.337 回答
1

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

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-x:hidden !important; 
    overflow-y:auto !important;
}
于 2019-02-13T09:59:22.633 回答
0

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

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

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

于 2011-03-10T21:52:10.223 回答
0

将AppearanceSettings ShrinkToFit="False"和应用AutoWidth="true"到您的jqGrid.

于 2012-06-01T06:08:44.993 回答
0

这对我有用

 <style type="text/css">
    .ui-jqgrid-bdiv {
        overflow-x: hidden !important;
    }
 </style>
于 2019-10-09T12:00:01.977 回答
0

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

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");
                }
}
于 2018-07-17T15:34:31.143 回答
0

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

.ui-jqgrid .ui-jqgrid-bdiv {
 position: relative;
 margin: 0;
 padding: 0;
 overflow: auto;
 text-align: left;
}
于 2019-06-20T03:56:03.700 回答