Question

对于我的Angular js网格工作，我使用ui-grid（v3.1.1）来实现网格表。当我改变分页大小时，我无法使用鼠标滚轮向下滚动。当我将鼠标悬停在滚动条上的鼠标上时，然后向上和向下滚动都工作正常。奇怪的是，使用鼠标滚轮向上滚动也很好。它只是向下滚动似乎没有用。我不理解它的原因。

我在使用以下时禁用了滚动：

.ui-grid-render-container-body .ui-grid-viewport {
        overflow: auto !important;
    }

除此之外，我没有更改任何默认设置。为什么滚动下来的鼠标滚轮在ui-grid上盘旋时不会起作用？请帮忙

Answer 1

我在v4.0.2第2859行（event.preventDefault()函数中）注释了gridUtil.on.mousewheel。

不能说这可能产生的其他影响，但对我的使用有用。

Answer 2

在v4.0.2及更高版本中遇到此鼠标滚轮/触控板拖动问题v4.0.3在带有分页和格式的网格中启用过滤并使用CSS修改以启用单元格自动换行。

.ui-grid-viewport .ui-grid-cell-contents {
  word-wrap: break-word;
  white-space: normal !important;
  overflow:visible;
}

.ui-grid-cell {
  display : table-cell;
  height: auto !important;
  overflow:visible;
  position: static;
}

.ui-grid-row {
  height: auto !important;
  display : table-row;
  position: static;
}

.ui-grid-row div[role=row] {
  display: flex ;
  align-content: stretch;
}

尝试了Paul的修复并且它有效，但需要更改核心代码。此外，我们的要求要求基于数据而不是带滚动的固定高度表在页面上显示整个表格。所以我们无法使用。

相反，我通过实施动态网格高度解决方案解决了这个问题。

为网格添加了ng-style，如下所示：

  <div ui-grid="gridOptions" style="float:left" ui-grid-selection ui-grid-pagination ng-style="gridHeight()" class="myGrid"></div>

已禁用网格滚动：

    $scope.gridOptions.enableHorizontalScrollbar = 0;
    $scope.gridOptions.enableVerticalScrollbar = 0;

编写函数gridHeight如下（使用jQuery）：

    $scope.gridHeight = function() {

      var outerHeight = 50; //buffer for things like pagination

      $('.ui-grid-row').each(function() {
        outerHeight += $(this).outerHeight();
      });

      $('.ui-grid-header').each(function() {
        outerHeight += $(this).outerHeight();
      });

      return { height: outerHeight+"px"};
    };

这满足了我们的要求。

Answer 3

解决此问题的另一种方法 - 如果网格至少没有滚动 - 是重新定义原型函数atTop＆amp; atBottom在uigrid的ScrollEvent上。这不需要更改uigrid的代码，只需要在控制器或app.run（）中注入 ScrollEvent 。如果可以滚动，网格会吞下任何滚动事件，但如果没有滚动条，则不会处理它。原始代码也未通过对 this.y.percentage 的isNaN检查 - 我认为它应该与下面的评论中一样。

 ScrollEvent.prototype.atTop = function(scrollTop) {
   return true;
   //return (this.y && (this.y.percentage === 0 || isNaN(this.y.percentage) || this.verticalScrollLength < 0) && scrollTop === 0);
 };

 ScrollEvent.prototype.atBottom = function(scrollTop) {
   return true;
   //return (this.y && (this.y.percentage === 1 || isNaN(this.y.percentage) || this.verticalScrollLength === 0) && scrollTop > 0);
 };

当鼠标在网格上时，鼠标滚轮向下滚动不起作用 - ui-grid angular js

3 个答案: