jqGrid 水平滚动条

Question

jqGrid 水平滚动条

jqueryjquery-pluginsjqgridscrollbarhorizontal-scrolling

32

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

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

http://dskarataev.ru/jqgrid.png

如果我设置 autowidth: true，那么表格的宽度等于列的总宽度，但我需要表格的宽度等于由函数 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}]
});

- dskarataev

13个回答

5

有些情况下，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内部使用它。

- Oleg

4

在网格上设置明确的宽度并使用

autowidth: false,
shrinkToFit: true

- arviman

这个解决方案并不适用于每种情况。改变CSS可以解决问题。 - Matthieu

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

- Prem Rajendran

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

- kiran vennampelli

1

很简单，在jqgrid中使用 shrinkToFit: false。保留html，不做解释。

- cavalsilva

1

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

您必须仅以数字设置表格的高度，不要在末尾添加“px”。

- Agustin Baez

1

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

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

- Hari Prasad Ranganathan

1

这对我有效

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

- emon

0

我使用了jqgrid API方法setGridHeight。在IE 8中，它对我来说运行良好。

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

我将这些代码放在“loadComplete”函数调用下面。

- Sam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Herman van der Blom · Accepted Answer

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