Question

如何在 ng-grid cell 中添加（以编程方式）多个文本行？

ng-grid以下列方式创建：

HTML：

<div class="gridStyle" ng-grid="gridOptions"></div>

JavaScript的：

$scope.gridOptions = {
    data: 'myArray',
    ...
}

其中myArray是我使用类似的东西创建的JSON数组：

function returnJsonArray(size){
    var d = [];
    ...
    for ( var i = 0 ; i < size ; i++ ) {
        values = ['VALUE TO SPLIT', ...];
        d.push(createJsonObject(keys, values);
    }
    return d;
}

根据上面的例子，第一列中的每个单元格都有“VALUE TO SPLIT”。我希望：

+-------+-------+
| VALUE |       |
| TO    |   ?   |
| SPLIT |       |
+-------+-------+
| VALUE |       |
| TO    |   ?   |
| SPLIT |       |
+-------+-------+

而不是

+---------------+-------+
| VALUE TO SPLIT|   ?   |
+---------------+-------+
| VALUE TO SPLIT|   ?   |
+---------------+-------+

我尝试使用 （在values = ['VALUE TO SPLIT',...];中），但它被认为是我文字的一部分。

默认情况下，生成的DOM包含很多div：

...
    <div class="ngCellText col0 colt0" ng-class="col.colIndex()">                           
        <span ng-cell-text="" class="ng-binding">VALUE TO SPLIT</span>
    </div>
...

我对新输出在DOM中的用途不感兴趣（可以使用 +   + 或 可以在文本）。

Answer 1

如果你想要动态行高，ng-grid不是最好的选择。它使用具有固定高度的div网格模拟表格布局，并且不在运行时测量。最好切换到基于HTML表格的解决方案，如ng-table。

无论如何，关于你的问题，这将是一个解决方案：

在gridOptions中使用固定的rowHeight以最匹配您最大的rowHeight
创建一个替换文本 
使用使用该过滤器的cellTemplate

这是一个简单的过滤器：

app.filter('splitAtSpaces', function() {
  return function(text, length, end) {
    if (text) {
      return text.split(' ').join('<br>');
    }
  }
});

这是cellTemplate：

var splitTpl = '<div class="ngCellText" ng-bind-html="row.getProperty(col.field)|splitAtSpaces"></div>'

以下是具有最佳（猜测）高度值的gridOptions：

  $scope.gridOptions = {
    data: 'myData',
    rowHeight: 90,
    columnDefs: [{
      field: 'name',
      displayName: 'Name',
      cellTemplate: splitTpl
    }, {
      field: 'age',
      displayName: 'Age'
    }]
  };

并plunker显示一切如何协同工作。

注意：

注意纳入和注射ng-sanitize！

如果您使用的是另一个版本的angularJs ng-bind-html可能已过时/未实现（ Aargh，我之前忘记了此安全措施！）如果您的输出显示{{ 1}}而不是在SO上进行实际换行。这个问题还有很多答案。

是的，是的。我几乎忘了告诉你如何更改css，以便分隔符适合你的新行高：

 

一旦你开始运行，请回来提出更详细的问题。但总体而言，我强烈建议您使用其他表/网格指令。

以编程方式在ng-grid单元格中添加多行

1 个答案: