Question

我使用多个ui-grid，只想为一个网格编辑ui-grid-row类。但它反映了所有人。

代码

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

我将CSS应用为

.gridR.ui-grid-row {height：auto！important;} .gridR.ui-grid-row＆gt; div {display：table-row;}

.gridR.ui-grid-row＆gt; 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;}

但没有发生任何事情。

有人可以为此提供帮助吗。

由于

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类，而不仅仅是将R添加到现有的grid类中

希望有所帮助，如果您有任何其他问题，请与我们联系。

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

1 个答案: