在 ui 网格中显示断线

Question

我正在使用如下的 uigrid:

columnDefs: [                            
           { name: 'CA', field: 'CA', displayName: 'CA', enableCellEdit: false }
]

CA 列具有如下数据：

<div> name : Jon ><br /> Job : Barber </div>

即使我有 <br /> 我也得到了结果，没有断线。

有什么解决办法吗？显示结果如下：

name : Jon
Job : Barber

Answer 1

我相信这可能接近您想要的，user2848242。

JavaScript/AngularJS 控制器：

var app = angular.module('app', ['ui.grid', 'ngSanitize']);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.gridOptions = {
    rowHeight: 40,
    enableRowHeaderSelection: false,
    columnDefs: [{
      name: 'CA1',
      field: 'CA',
      displayName: 'Original CA',
      enableCellEdit: false,
      cellTemplate: '<span ng-bind-html="row.entity[col.field]"></span>'
    }, {
      name: 'CA2',
      field: 'Name',
      displayName: 'Alternative CA',
      enableCellEdit: false,
      cellTemplate: '<div>Name: {{row.entity[col.field]}}<br />Job: {{row.entity["Job"]}}</div>'
    }]
  }
  $http.get('data.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

基本思路是，将 cellTemplate 添加到您的 columnDefs。棘手的部分是，由于 HTML 在您的数据中，您需要使用 ngSanitize 到 "trust" 和 HTML，因此它会显示为 HTML。由于最好将 HTML 与数据分开，出于多种原因，我提供了一个替代方案 - 因此 Original CA 和 Alternative CA 列。

这是一个工作的 Plunker，http://plnkr.co/edit/pkoARFr11Q7TmbBIegIT?p=preview。

希望对您有所帮助，如果您有任何其他问题，请告诉我。

在 ui 网格中显示断线

Show breakline in uigrid

javascript

css

angularjs

json

ui-grid