Zeilenspanne in UI Grid Angular JS

Question

Ich versuche, eine Zeile in zwei zu teilen, dh. Zeilenspanne in Angular JS UI Grid. Ich bin nicht in der Lage zu finden, wie das zu tun ist. Ich brauche unterschiedliche Farbschemas für Zeilen innerhalb der Zeilen des UI-Rasters. Kann mir bitte jemand dabei helfen und mir ein paar verwandte Geigen oder Plünderer zum Nachschlagen geben. Danke im Voraus.

Answer 1

Ich habe einen RowSpan Hack, geeignet für mein Bedürfnis, nicht unbedingt geeignet für jeden Fall: Ich benutze position:absolute auf der Zelle oberen Reihe und display:none auf den Zellen segmentierter Zeilen. Siehe http://plnkr.co/edit/TiQFJnyOvVECOH2RL4ha

Alles im ng-Stil in der Zelle Vorlage , das ein spanCompany Attribut verwendet die Anzahl der Zeilen zu wissen, außer Kraft zu setzen. Wir müssen die height und width berechnen, da wir position:absolute sind. Dies bedeutet auch, dass die Breite in px, nicht% ausgedrückt werden muss.

ng-style-Extrakt:

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

Voll Code:

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 

    }; 
}]);