2015-11-12 30 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 } 
     ] 
    } 
}