使用多個ui-grid，需要編輯一個網格的ui-grid-row類

我正在使用多個ui-grid，只想爲一個網格編輯ui-grid-row類。但它反映了所有。使用多個ui-grid，需要編輯一個網格的ui-grid-row類

代碼

我想排的高度應該是僅次於汽車網格。

我應用CSS作爲

.gridR.ui格行：; .gridR.ui格列> DIV {高度自動重要！} {顯示：表列;}

.gridR.ui-grid-row> div .ui-grid-cell {display：table-cell; float：none; vertical-align：middle; height：auto！important;}

.gridR.ui-grid-cell-contents {white-space：normal; text-overflow：inherit; word-break：break-word;}

但是什麼也沒有發生。

有人可以幫助這個。

感謝

來源

2017-03-21 cheeku

我們是開發者，我們只理解代碼。你必須添加一個代碼來檢查你的問題。否則，問題將被封閉，沒有人可以回答。 – tire0011

請有人回覆。 – cheeku

@cheeku我回答如下，有幫助嗎？ –

這應做到：

var app = angular.module('app', ['ui.grid']); 
 
app.controller('MainCtrl', ['$scope', 
 
    function($scope) { 
 
    var aLotOfData = [{ 
 
     "LongString": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." 
 
    }]; 
 
    aLotOfData.push(aLotOfData[0]); 
 
    aLotOfData.push(aLotOfData[0]); 
 
    aLotOfData.push(aLotOfData[0]); 
 
    $scope.gridOptionsL = { 
 
     columnDefs: [{name: 'LongString', displayName: 'Default Style'}], 
 
     data: aLotOfData 
 
    }; 
 
    $scope.gridOptionsR = { 
 
     columnDefs: [{name: 'LongString', displayName: 'Your Style'}], 
 
     data: aLotOfData 
 
    }; 
 
    } 
 
]);

div[ui-grid] { 
 
    height: 180px; 
 
    width: 300px; 
 
    float: left; 
 
} 
 

 
.gridR .ui-grid-row { 
 
    height: auto!important; 
 
} 
 

 
.gridR .ui-grid-row>div { 
 
    display: table-row; 
 
} 
 

 
.gridR .ui-grid-row>div .ui-grid-cell { 
 
    display: table-cell; 
 
    float: none; 
 
    vertical-align: middle; 
 
    height: auto!important; 
 
} 
 

 
.gridR .ui-grid-cell-contents { 
 
    white-space: normal; 
 
    text-overflow: inherit; 
 
    word-break: break-word; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" /> 
 
<div ng-app="app" ng-controller="MainCtrl"> 
 
    <div ui-grid="gridOptionsL" class="grid gridL"></div> 
 
    <div ui-grid="gridOptionsR" class="grid gridR"></div> 
 
</div>

（沒有看到你的HTML我只能猜測 - 但我基本上都添加了一個gridR類，而不是隻是增加的R到現有的grid類）

希望幫助，讓我知道如果您有任何進一步的問題。

來源

2017-03-23 20:23:41

使用多個ui-grid，需要編輯一個網格的ui-grid-row類

回答

相關問題