使用多个 ui-grid ，需要为一个网格编辑 ui-grid-row class

Question

我正在使用多个 ui-网格，只想为一个网格编辑 ui-网格行 class。但它反映了所有人。

代码

我希望仅第二个网格的行高应该是自动的。

我申请了CSS作为

.gridR.ui-grid-row{height: auto!important;} .gridR.ui-grid-row > div { 显示：table-row;}

.gridR.ui-grid-row > div.ui-grid-cell {显示：table-cell；浮动：none；垂直对齐：中间；高度：自动！重要；}

.gridR.ui-grid-cell-contents{ 白色-space：正常； text-overflow: inherit;word-break: break-word;}

但什么也没发生。

有人可以帮忙吗。

谢谢

Answer 1

应该这样做：

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 class 而不是仅仅在现有的 grid class)

希望对您有所帮助，如果您还有其他问题，请告诉我。

使用多个 ui-grid ，需要为一个网格编辑 ui-grid-row class

Using multiple ui-grid , need to edit ui-grid-row class for one grid

angularjs

ui-grid