Question

我按照教程行进行，我无法提供片段或屏幕截图，因为它的工作相关，我们的机器没有互联网抱歉＆gt;＆lt;

无论如何，我试着解释一下。假设我有4行和任意数量的列，这非常适合我的UI。一旦我添加ui-grid-expandable，我就有8行..

前4行只有加号，下面是我的实际行，它的超级越野车看起来搞砸了。如果我单击加号，它将显示子表，但在加号和实际行之间，它不可用。

我已尝试过20版并且不稳定但没有区别。

我注意到当我删除所有CSS（例如bootstrap）时，表格全部放在一起，我得到4行，但是当我单击展开按钮时，表格又一次都不稳定。如果我在子表中有3列，并且有1行，则行中的前2列将被填充但第三列为空，并且为第三个值创建一个新行juts，但它位于第一列下面

我可以使用一些建议/例子..来自没有图片和代码片段。

<div class="grid" ui-grid="data" ui-grid-expandable></div>

基本上这个代码http://ui-grid.info/docs/#/tutorial/306_expandable_grid ...你可以在那里得到plnkr但是由于某种原因plnkr没有为我加载。我几乎都在复制教程。

Answer 1

Angular UI-Grid可扩展表仍处于Alpha阶段。这里的主要问题是他们的Grid无法自动计算高度，这导致subGrid在高度达到最大点时覆盖主要网格元素。

我做了一个小工作，可能会有所帮助。它使用TreeLevel计算，在自动计算高度时触发主网格和子网格。

onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
      $scope.gridApi.treeBase.on.rowExpanded($scope, function(row) {
        if( row.entity.$$hashKey === $scope.gridOptions.data[50].$$hashKey && !$scope.nodeLoaded ) {
          $interval(function() {
            $scope.gridOptions.data.splice(51,0,
              {name: 'Dynamic 1', gender: 'female', age: 53, company: 'Griddable grids', balance: 38000, $$treeLevel: 1},
              {name: 'Dynamic 2', gender: 'male', age: 18, company: 'Griddable grids', balance: 29000, $$treeLevel: 1}
            );
            $scope.nodeLoaded = true;
          }, 2000, 1);
        }
      });

然后我们需要循环数据并在我们以这种方式接收数据后设置高度。

$timeout(function(){
      if (!!$scope.gridOptions.data) {
          $('.ui-grid-render-container-left .ui-grid-viewport').height($('.ui-grid-render-container-left .ui-grid-viewport').height() + 17);
          $('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
      }
   });

我的Plnkr Example。

角度ui网格可扩展的桌子是非常多或只是我？

1 个答案: