为什么嵌套的ng-grid高度不起作用？

Question

我有一个嵌套的ng网格.

var faculty = angular.module('faculty', ['ngGrid']);

faculty.controller('facultycontroller', function facultycontroller($scope, $http, $window)
{

$scope.facdata = [{

    examname: 'test'       
  },{

    examname: 'test2'
  }];

  $scope.gridOptions = {

    data: 'facdata',

    plugins: [new ngGridFlexibleHeightPlugin()],

    columnDefs: [
      {field: 'examname',displayName: 'Exam Name'},
      {field: '', displayName: 'Subjects' , cellTemplate: '<div  ng-grid="gridOptions1"  ></div>'
    }]
  };
$scope.fac1data = [{
    abc: 'value',
    def: 'value2'
  }, {

    abc: 'value3',
    def: 'value4'
  }, {
    abc: 'value1',
    def: 'value4'
  }, {
    abc: 'value2',
    def: 'value4'
  }, {
    abc: 'value34',
    def: 'value4'
  }, {

    abc: 'value34',
    def: 'value4'
  }, {
    abc: 'value23',
    def: 'value14'
  }, {
    abc: 'value433',
    def: 'value5554'
  }, {

    abc: 'value3555',
    def: 'value4878'
  }
  ];
$scope.gridOptions1 = {

   plugins: [new ngGridFlexibleHeightPlugin()],

    data: 'fac1data',

    columnDefs: [

      {  field: 'abc',displayName: 'abc'},

      { field: 'def',displayName: 'def'}]
  }
});

请参阅Plunker 我需要一目了然地显示所有嵌套数据网格.我需要一目了然地显示子网格数据(没有垂直滚动).但嵌套网格高度不起作用.我的愿望网格如下......

Answer 1

ng-grid 不是为嵌套网格设计的： 甚至是逐个单元格的动态高度

如果您查看 ng-grid 的模板，ui-grid.html您会看到大小以像素为单位固定：

  height: {{ grid.options.rowHeight }}px;

见 github

这个CSS类嵌入在模板中，没有空间覆盖“自动”。由于网格是用Div's而不是构建的，Tables如果每个人都cell-div可以自由决定自己的行为，那么行和列之间的表格关系就很困难。所以嵌套网格是一个相当大的挑战。

你CAN得到你想要与影响类似于嵌套网格黑客攻击：

见plnkr

折叠网格

注意：已添加插入符号以显示父行是可扩展的。我没有添加逻辑来隐藏没有孩子的父行的插入符号。

扩展网格

见plnkr

更改您的 JSon以包含 Test、Name 和 D Score 列。使用列作为测试名称或学生姓名/分数。为孩子使用父 ID 并将 ID 提供给父母：

$scope.facdata  = [{test: "Basic Physics Test", parentId:0,id:1,expanded:true},
                 {name: "NAME", Score: "SCORE",parentId:1,expanded:false},
                 {name: "John", Score: 77,parentId:1,expanded:false},
                 {name: "Jacob", Score: 66,parentId:1,expanded:false},
                 {name: "Jenny", Score: 94,parentId:1,expanded:false},
                 {test: "Advanced Physics Test",id:2, parentId:0,expanded:true},
                 {name: "NAME", Score: "SCORE",parentId:2,expanded:false},
                 {name: "Freddy", Score: 94,parentId:2,expanded:false},
                 {name: "Samantha", Score: 38,parentId:2,expanded:false},
                 {name: "Judy", Score: 100,parentId:2,expanded:false}
                 ];

在 Grid Options 中设置rowTemplate为ng-show对子expanded字段使用指令

$scope.gridOptions = { 
    data: 'facdata',
    columnDefs: [{field: 'id',displayName:'',width:20,
    cellTemplate:'<div ng-show="row.getProperty(\'id\')" ng-click="toggleExpansion(row.getProperty(col.field))"><i class="fa fa-caret-right"></i></div>'},
                {field: 'test', displayName: ''},
                {field: 'name', displayName:''},
                 {field:'Score', displayName:'', 
                 cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field)}}</div>'}],
    rowTemplate:'<div style="width: 600px" ng-show="row.getProperty(\'expanded\')"><div ng-repeat="col in renderedColumns" class="ngCell ">' +
                       '<div ng-cell></div> </div></div>'

添加 ToggleSubReport 函数来管理显示嵌入的数据

$scope.ToggleSubReport  = function(id) {
  for (var i=0;i<$scope.facdata.length;++i){
    if ($scope.facdata [i].parentId ===id){
      $scope.facdata [i].expanded = !$scope.facdata [i].expanded;
    }
  }
}

见plnkr

：

：

阿明·乌丁 (Amin Uddin) 的后续行动（原始海报）

1）嵌套网格是不可能的： 这是您的主要问题和目标。这就是你悬赏的东西。但是正如您从github 源代码中看到的网格行高（以像素为单位定义）和来自ng-grid贡献者的响应，这不是他们甚至设想的选项。NG-Grid 的单元格高度并不是真正动态的，因为ng-grid是围绕匹配大小的divs行而不是 a table（可以更自然地重新调整行和行单元格的大小）而设计的。

2）我向您展示的那种子网格确实可以容纳复杂的主子关系：您可以在序列化之前合并数组（或将JSON字符串解析为数组，然后合并它们）。您必须重新定义我用于 master-detail 的字段，从id/parentid我曾经使用的缺乏想象力PK/FK的 2 个列表中的 。