UI Grid Angular JS中的行跨度

Question

我正在尝试将 Row 分成两部分，即。 Angular JS UI 网格中的行跨度。我无法找到如何执行此操作。我需要 UI 网格行中的行使用不同的配色方案。任何人都可以帮我解决这个问题，并给我一些相关的小提琴或 plunker 以供参考。提前致谢。

Answer 1

我有一个 RowSpan hack，适合我的需要，但不一定适合所有情况：我在顶行的单元格上使用 position:absolute，在跨行的单元格上使用 display:none。见http://plnkr.co/edit/TiQFJnyOvVECOH2RL4ha

一切都在单元格模板中的 ng-style 中，它使用spanCompany 属性来知道要覆盖的行数。我们必须计算height 和width，因为我们是position:absolute。这也意味着宽度必须以px 表示，而不是%。

ng 样式提取：

ng-style="{ 
  height:21*row.entity.spanCompany+'px',
  width:col.width+'px',
  position:'absolute',
  display:row.entity.spanCompany==0?'none':'block'
}"

完整代码：

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {

  $scope.data = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo has a rather long company name that might need to be displayed in a tooltip",
        "spanCompany":2,
        "employed": true
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Enormo",
        "spanCompany":0,
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "spanCompany":1,
        "employed": false
    }
  ];

  $scope.gridOptions = {
    columnDefs: [
      { name: 'firstName', width: '20%' },
      { name: 'lastName', width: '20%' },
      { name: 'company', width: '200',
        cellTemplate: '<div class="ui-grid-cell-contents wrap" title="TOOLTIP" ng-style="{ height:21*row.entity.spanCompany + \'px\', width:col.width+\'px\', position:\'absolute\', display:row.entity.spanCompany==0?\'none\':\'block\', borderStyle:\'dotted\', borderWidth:\'1px\'}" >{{COL_FIELD CUSTOM_FILTERS}}</div>'
      },
      { name: 'employed', width: '30%' }
    ],
    data: 'data',
    rowHeight: 21

  };
}]);