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

Mater Detail Grid/Nested Grid

Answer 1

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

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

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

请参阅 github

此 CSS 类嵌入在模板中，没有余地覆盖“自动”。由于网格是使用Div's而不是Tables构建的，因此如果每个cell-div可以自由决定它自己的行为，则行和列之间的表格关系很难实现。因此，嵌套网格是一项挑战。

您 CAN 可以通过类似于嵌套网格的黑客获得您想要的效果：

请参阅plnkr

折叠网格 enter image description here

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

扩展网格 enter image description here

请参阅plnkr

更改您的JSon 以包含Test，Name和andd 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}
                 ];

在网格选项中将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 是围绕匹配大小{{1}设计的行而不是divs（可以更自然地重新调整行和行单元的大小）。

2）我向您展示的那种子网格确实可以容纳复杂的主子关系：您可以在序列化之前合并数组（或解析 JSON 字符串到数组，然后合并它们）。您必须重新定义我用于主要细节的字段，这些字段来自我曾经使用过的table 2个列表中的id/parentid。

Answer 2

只是破解每一行的示例都有相同的子行数。

<body ng-controller="facultycontroller">
  <h1>Hello Plunker!</h1>
  <div ng-grid="gridOptions" ></div>
</body>

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

faculty.controller('facultycontroller', function facultycontroller($scope, $http, $window) {
  $scope.facdata = [{
    examname: 'test' 
  },{
    examname: 'test2'
  }];

  $scope.rowHeight = 30;

  $scope.updateGrid = function() {
      $scope.gridOptions = {
      data: 'facdata',
      rowHeight: $scope.fac1data.length * $scope.rowHeight,
      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 = {
   headerRowHeight: 0,
    data: 'fac1data',
    rowHeight: $scope.rowHeight,
    columnDefs: [
      {  field: 'abc',    displayName: 'abc'    },
      { field: 'def',      displayName: 'def'   }]
  }

  $scope.updateGrid();

  $scope.fac1data = [{
    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.updateGrid();

});

Plunker

编辑：如果主行具有不同的子行计数，则不起作用。我只有想法。必须是fork ui-grid，并将其重新设计为自动高度。官方的ui-grid是gridTemplate.html的设计固定高度，并使用绝对顶部位置。

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

2 个答案:

请参阅 github

请参阅plnkr

请参阅plnkr

请参阅plnkr

Amin Uddin的跟进（原始海报）