获取扩展并使用ng-grid中的多列复选框

Question

我想创建一个网格，它显示展开/折叠和带有多列的复选框。

为此，我创建了一个样本，该样本在第一级展开，并显示下一级的复选框。

我的样本是 - plunker

$scope.customExpand = function (row, gridId) {
            // find which grid (in case more than one on page)
            var selectedGrid;
            if (gridId === $scope.gridOptions.gridId) {
                selectedGrid = $scope.gridOptions.ngGrid;
            }



            // first collapse all others

           /* angular.forEach(selectedGrid.rowFactory.aggCache, function (aggRow, key) {
                if (aggRow.isAggRow && aggRow.collapsed === false) {
                    aggRow.toggleExpand();
                }
            });*/
            // then scroll to row for this group
            var rowNum = 0;
            angular.forEach(selectedGrid.rowFactory.aggCache, function (aggRow, key) {
                if (aggRow.label == row.label) {
                    rowNum = key;
                }
            });

            selectedGrid.$viewport.scrollTop(rowNum * selectedGrid.config.rowHeight);
            // then expand the row
            row.toggleExpand();
        }

  $scope.gridData = [];
  $scope.aggregateLots = function(row) {
    var lots = 0;
    angular.forEach(row.children, function(subrow) {
      lots += subrow.entity.lots;
    });
    return lots;
  }

  $scope.gridOptions = {
    aggregateTemplate: "<div ng-click=\"debugger;customExpand(row,gridId)\" ng-style=\"rowStyle(row)\" class=\"ngAggregate\">\r" +
      "\n" +

      "<div class='ngCell col3 col3t'><div class='ngCellText col3 col3t'>{{row.children[0].entity.cname}}</div></div>\r\n" +
      "<div class='ngCell col4 col4t'><div class='ngCellText col4 col4t'>{{row.children[0].entity.maturity | date:\'dd-MMM-yy\' }}</div></div>\r\n" +
      "<div class='ngCell col5 col5t'><div class='ngCellText col5 col5t'>{{row.children[0].entity.bs}}</div></div>\r\n" +
      "<div class='ngCell col6 col6t'><div class='ngCellText col6 col6t'>{{row.children[0].entity.price}}</div></div>\r\n" +
      "<div class='ngCell col7 col7t'><div class='ngCellText col7 col7t'>{{row.totalChildren()}}</div></div>\r\n" +
      "<div class='ngCell col8 col8t'><div class='ngCellText col8 col8t'>{{aggregateLots(row)}}</div></div>\r\n" +
      "\n" +
      "    <div class=\"{{row.aggClass()}}\"></div>\r" +
      "\n" +
      "</div>\r" +
      "\n",
    data: 'griddata',
    showFilter: false,
    width: '572px',
    showGroupPanel: false,
    groups: ['groupCol'],
    enableRowSelection: false,
    multiSelect: true,
    selectWithCheckboxOnly: true,
    showSelectionCheckbox: true,
    checkboxCellTemplate: '<div class="ngSelectionCell" ng-class="Header"><input tabindex="-1" class="ngSelectionCheckbox" class="Header" type="checkbox" ng-checked="row.selected" /></div>',

    columnDefs: [{
      field: 'groupCol',
      visible: false
    }, {
      field: 'cname',
      displayName: 'Contract',
      width: '150px'
    }, {
      field: 'maturity',
      displayName: 'Maturity',
      width: '112px',
      cellFilter: 'date:\'dd-MMM-yy\''
    }, {
      field: 'bs',
      displayName: 'B/S',
      width: '50px'
    }, {
      field: 'price',
      displayName: 'Price',
      width: '100px'
    }, {
      field: 'identid',
      displayName: 'Trades',
      width: '100px'
    }, {
      field: 'lots',
      displayName: 'Lots',
      width: '60px'
    }]

  };


  _.each(tradelist, function(trade) {
    trade.groupCol = trade.cname ;
  });
  $scope.griddata = _.sortBy(tradelist, function(row) {
    return row.groupCol;
  });

现在我的要求是

• 显示第一级的检查弓
• 在第二级展开时也展示它在第三级扩展。
• 显示第三级复选框。

例如 -

所有这些我只想使用ng-grid创建，而不是使用ui-grid或其他任何内容。