UIグリッドの行スパン角度JS

Question

私はRowを2つに分割しようとしています。 Angular JS UIグリッドの行スパン。私はこれを行う方法を見つけることができません。私は、UIグリッドの行内の行のための異なる色スキームが必要です。誰もがこれで私を助けて、私にいくつかの関連するフィドルまたは参照するplunkerを与えることができますか？前もって感謝します。

Answer 1

私はすべての場合には必ずしも適していない私のニーズに適したROWSPANハックを、持っている：私は、スパン行細胞上の一番上の行のセルにposition:absoluteを使用してdisplay:none。 http://plnkr.co/edit/TiQFJnyOvVECOH2RL4ha

すべてが上書きする行数を知ることがspanCompany属性を使用して、細胞テンプレートにNGスタイルである参照してください。我々はposition:absoluteであるので、heightとwidthを計算しなければなりません。これはまた、幅が％でなく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 

    }; 
}]);