UI Grid Angular JS中的行跨度

Question

我试图将一行划分为两个即。 Angular JS UI Grid中的行跨度。我无法找到如何做到这一点。我需要为UI网格行中的行设置不同的颜色方案。任何人都可以帮我这个，并给我一些相关的小提琴或plunker推荐。提前致谢。

Answer 1

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

所有内容都位于单元格模板中的 ng-style 中，该模板使用spanCompany属性来了解要覆盖的行数。我们必须计算height和width，因为我们是position:absolute。这也意味着宽度必须以px表示，而不是％。

ng-style extract：

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

  };
}]);