我有一个嵌套的 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 我需要一目了然地显示所有嵌套数据网格。我需要一目了然地显示子 ng-grid 数据(没有垂直滚动)。但嵌套网格高度不起作用。我的愿望网格如下所示....

最佳答案

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

如果您查看 ng-grid 的模板 ui-grid.html，您会发现尺寸以像素为单位固定:

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

参见 github

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

您可以通过类似于嵌套网格的 hack 获得您想要的效果:

参见plnkr

折叠网格

注意: 添加插入符号是为了表明父行是可扩展的。我没有添加逻辑来为没有子项的父行隐藏插入符号。

扩展网格

参见plnkr

更改您的 JSON 以包含测试、姓名和分数列。将列用于测试名称或学生姓名/分数。为 child 使用父 ID，并将 ID 提供给 parent :

$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 以针对 expanded 字段对子项使用 ng-show 指令

$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 是围绕匹配大小的 div 设计的 行而不是 table(可以更自然地调整行和行单元格的大小)。

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

关于javascript - 为什么嵌套的 ng-grid 高度不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25205911/