2015-11-12 27 views
0

我正在尝试使用angularjs ui-grid的可扩展网格。但是我无法使可扩展的用户界面中的数据绑定工作。一切似乎都很好,我可以扩展行并且没有错误,但是当我尝试打开一行时,那里没有数据。当在调试时在控制台输入data [i]时,我得到一个json对象,但是当输入data [i] .subGridOptions时,我得到了未定义的值。我错过了什么?无法将我的UI网格扩展为绑定数据

继承人我的代码:

“头” - HTML

<div class="col-md-12" style="padding-top:10px"> 
     <div ui-grid="log_grid" 
      ui-grid-pagination 
      ui-grid-exporter 
      ui-grid-selection 
      ui-grid-expandable 
      ui-grid-pinning 
      id="log_grid" 
      style="height:620px;overflow:hidden"> 
     </div> 
    </div> 
</div> 

subgrid.html

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div> 

代码控制器试图将数据绑定:

var r = logging.get_log(url); 
    r.promise.then(function() { 

     $scope.config.logs = r.logs; 
     var data = $scope.config.logs; 

     if (data.length == 0) { 
      $scope.popup("Too bad..", "No result were found."); 
     } 
     else { 
      for (i = 0; i < data.length; i++) { 
       data[i].subGridOptions = { 
        columnDefs: [{ name: "Logger", field: "logger" }], 
        data: data[i].logger 
       } 
      } 
     } 
     $scope.log_grid.data = $scope.config.logs; 
    }); 
} 

在中设置网格选项控制器:

$scope.log_grid = { 
    enableGridMenu: true, 
    enableColumnResizing: true, 
    enableRowSelection: true, 
    multiSelect: false, 
    enableRowHeaderSelection: false, 
    paginationPageSizes: 18, 
    paginationPageSize: 18, 
    enableHorizontalScrollbar: 0, 
    expandableRowTemplate: 'static/packages/logging/views/subgrid.html', 
    expandableRowHeight: 150, 
    expandableRowScope: { 
     subGridVariable: 'subGridScopeVariable' 
    }, 
    onRegisterApi: function (gridApi) { 
     $scope.gridApi = gridApi; 
     gridApi.selection.on.rowSelectionChanged($scope, function (row) { 
     }); 
    }, 
    columnDefs: [ 
     { 
      displayName: 'Logger', 
      field: 'logger', 
      width: '10%', 
      enableCellEdit: false 
     }, 
     { 
      displayName: 'Node', 
      field: 'node', 
      width: '10%', 
      enableCellEdit: false 
     }, 
     { 
      displayName: 'TimeStamp', 
      field: 'timestamp', 
      width: '15%', 
      enableCellEdit: false 
     }, 
     { 
      displayName: 'Type', 
      field: 'severity', 
      width: '15%', 
      enableCellEdit: false, 
     }, 
     { 
      displayName: 'Message', 
      field: 'msg', 
      width: '35%', 
      enableCellEdit: false, 
     }, 
     { 
      displayName: 'Source', 
      field: 'srcfile', 
      visible: false, 
      enableCellEdit: false, 
     }, 
     { 
      displayName: 'Line', 
      field: 'lineno', 
      visible: false, 
      enableCellEdit: false, 
     } 
    ], 

    data: null 
}; 

回答

0

我现在解决了这个问题,我不知道你要绑定的数据是这样的一个JSON JSON:https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json

我完成的代码看起来像现在这样:

for (i = 0; i < data.length; i++) { 
    data[i].subGridOptions = { 
     columnDefs: [{ name: "Column", field: "Column" }], 
     data: [ 
      { Column: "Source: " + data[i].srcfile }, 
      { Column: "Line: " + data[i].lineno } 
     ] 
    } 
}