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

Question

如何在 ng-grid 单元格中添加(以编程方式)多个文本行？

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|   ?   |
+---------------+-------+

我尝试使用<br/> (在 values = ['VALUE<br/>TO<br/>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 中的形式不感兴趣(它可以使用 <span> + <br/> + <span> 或 <br/> 可以位于文本中间)。

Answer 1

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

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

• 使用固定rowHeight在 gridOptions 中以最好地匹配您最大的 rowHeight
• 创建一个过滤器来替换文本 <br> 中的空格
• 使用 cellTemplate使用该过滤器

这是一个简单的过滤器:

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

这是单元格模板:

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

这里是具有最佳(猜测)高度值的网格选项:

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

还有一个plunker展示一切如何协同工作。

注意:

• 注意 ng-sanitize 的包含和注入(inject)!
• 如果您使用的是其他版本的 angularJs ng-bind-html可能已过时/未实现(啊，我不久前忘记了此安全措施!)如果您的输出显示 <br>而不是在 SO 上进行实际的换行。这个问题还有很多答案。

呃，是的。我差点忘了告诉你如何更改 css 以便分隔线适合你的新 rowHeight:

.ngVerticalBar {
 height: 100%;
}

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