在UI網格Angular JS中的行跨度

Question

我想將行分成兩個ie。在角JS UI網格中的行跨度。我無法找到如何做到這一點。我需要在UI網格行內的行中使用不同的配色方案。任何人都可以請幫助我，並給我一些相關的小提琴或蹲跳引用。提前致謝。

Answer 1

我有一個行跨度黑客，適合我的需要，不一定適合每一個案例：我在上段的上跨的行細胞的細胞和display:none使用position:absolute。見http://plnkr.co/edit/TiQFJnyOvVECOH2RL4ha

一切都在細胞模板，它採用了spanCompany屬性知道行覆蓋的數量NG式。我們必須計算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 

    }; 
}]);