过滤和长文本即将到来的白色空间代替滚动条

Question

以下是创建的http://plnkr.co/edit/5DhDmI1Odhrys4jYDwIB?p=preview

的plunker

我将文本框与ng-grid过滤器相关联。

$scope.filterOptions = {
    filterText:''
  }
  $scope.$watch('filterText',function(){
  $scope.filterOptions.filterText=$scope.filterText;
  });

1. 如果在文本框中输入“moroni”，则只会显示网格中的一行。但在右边，白色空间是可见的。有没有办法解决它。

2. plunker示例中的第一行是非常大的字符串，当文本很长时，只显示其中的一部分。是否可以打破字符串并将其显示在多行中。

Answer 1

您可以通过将gridoptions中的rowHeight设置为适合您最长字符串的值来修复文本未包装问题：

rowHeight:50

并将此定义添加到您的css：

.ngCellText {
    white-space: unset;
}

宽度空白问题显然是ng-grid中的一个错误。这个网格实际上不是一个表，而是很多定位和测量的div，看起来像一个表。似乎开发人员在没有可见的滚动条时忘记为行添加一些额外的宽度。如果修补代码（不推荐）或将gridheight设置为可以在没有滚动条的情况下显示所有行的值，则只能克服此问题。

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 500px; 
    height: 300px
}

看看这个Plunker。

无论如何，由于这些只是不切实际的黑客攻击，我建议你看看基于表格的指令，如trNgGrid，它具有ng-grid的所有功能，但在动态行高时更灵活。