각도 Ui-Grid 멀티 레벨 중첩

Question

각도를 Ui-grid으로 사용 중입니다. 다중 레벨 중첩을 시도 중입니다. 일부는 이미 uiGrid github에서 문제를 제기했습니다. 하지만 그 해결책은 효과가없는 것 같습니다.

this과 같은 JSON을 변경했습니다. 중첩 된 서브 그리드를 형성하려고합니다. 다음은

내 코드

$scope.gridOptions = { 
    expandableRowTemplate: 'expandableRowTemplate.html', 
    enableGridMenu: true, 
    expandableRowHeight: 150, 
    paginationPageSizes: [5, 10, 15], 
    paginationPageSize: 5, 
    //subGridVariable will be available in subGrid scope 
    expandableRowScope: { 
     subGridVariable: 'subGridScopeVariable' 
    } 
    } 

    $scope.gridOptions.columnDefs = [ 
    { name: 'id', enableHiding: false }, 
    { name: 'name' }, 
    { name: 'age' }, 
    { name: 'address.city' } 
    ]; 

    $http.get('http://private-7a7085-getfriends1.apiary-mock.com/getfriends') 
    .success(function (data) { 
     for (i = 0; i < data.length; i++) { 
     //for(i = 0; i < 50; i++){ 
     data[i].subGridOptions = { 
      columnDefs: [{ name: "Id", field: "id" }, { name: "Name", field: "name" }, { name: "Age", field: "id" }, { name: "Address", field: "name" }], 
      data: data[i].friends, 
      expandableRowTemplate: 'expandableRowTemplate1.html', 
      enableGridMenu: true, 
      expandableRowHeight: 150 
     } 

     for (j = 0; j < data[i].friends.length; j++) { 
      data[i].subNestedGridOptions = { 
      columnDefs: [{ name: "Id", field: "id" }, { name: "Name", field: "name" }, { name: "Age", field: "id" }, { name: "Address", field: "name" }], 
      data: data[i].friends[j].friends 
      } 
     } 
     } 
     $scope.gridOptions.data = data; 
    }); 

와 두 번째 수준의 중첩 된 HTML이다 (expandableRowTemplate1.html는) 내가 두 번째 수준 중첩 된 그리드 UI를 그리드에 데이터를 전달

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

처럼, 그것은 던져 본다 정의되지 않았습니다.

2 개 또는 3 개 레벨 이상의 확장형 UI 그리드를 구현하는 데 성공한 사용자가 있습니까? 그렇다면 plunker 또는 fiddle을 공유하거나 자세한 설명이 도움이 될 것입니다!

Answer 1

나는 지금이 작업을하고있다. 난 당신이 3 단계에서 바인딩하는 적절한 데이터를 구축했다고 가정합니다. 두 레벨 그리드 (상위 그리드의 행이 하위 그리드를 표시하도록 확장 됨)를 사용한다고 가정합니다.

최상위 레벨 그리드에는이를 정의하는 div 태그에서 지시문 ui-grid-expandable이 있습니다. 이것은 내 HTML보기에 있습니다.

<div ui-grid="gridThreeLayer" ui-grid-expandable></div> 

최상위 레벨 그리드는 gridOptions (angularJS)에 expandableRowTemplate을 정의합니다.

$scope.gridThreeLayer = { ........ 
expandableRowTemplate: '..your path.../expandableRowTemplate.html' } 

최상위 그리드의 expandableRowTemplate는 또 다른 "UI 그리드"를 정의하고 지시 "UI-그리드 확장"가 div 태그가 포함됩니다.

<div ui-grid="row.entity.subGridOptions" ui-grid-expandable></div> 

제 2 레벨 그리드는 데이터가 (나를 위해 $ http.get() 절약) AngularJS와에 결합 될 때 그 subGridOptions 및 columnDefs가 즉석에서 지어있다. 이때, 두 번째 레벨 그리드에 expandableRowTemplate 속성을 지정해야합니다.이 속성은 세 번째 레벨 그리드를 확장하여 표시하도록 지시합니다.

for (i = 0; i < response.data.length; i++) { 
response.data[i].subGridOptions = { ..... 
columnDefs: [ ............], 

data: response.data[i].IP, // note that this is my 2nd level of data objects - yours will differ 
expandableRowTemplate: 'AngularApp/Templates/MultiLevelTemplate.html 

2 레벨 그리드의 expandableRowTemplate 각 행에 대한 중첩 격자를 렌더링하는 그리드를 지시하는 "UI 그리드"와 div 태그를 정의 할 필요가있다. 확장을위한 지침이 필요하지 않습니다 (그러나 4 단계 깊이로 추가 할 수 있습니다). 내 것은 MultiLevelTemplate이라고 불린다.

<div ui-grid="row.entity.subGridOptions"></div> 

은 이제 즉석에서 각 행의 gridOptions 및 columnDefs를 구축하고 같은 AngularJS와 블록에, 당신은 데이터의 수준을 통해 반복의 또 다른 레벨로 이동해야합니다. 이렇게하면 3 단계 그리드의 subGridOptions 및 columnDefs를 정의 할 수 있습니다. 그래서 당신은 "i"루프에 있고, 그 안에 "x"루프를 시작합니다. 데이터 소스를 설정할 때, 그것은 내 자신의 3 레벨의 데이터 객체를 사용하고 있습니다. 자신 만의 것을 사용해야합니다.

for (x = 0; x < response.data[i].IP.length; x++) { 
response.data[i].IP[x].subGridOptions = { 
columnDefs: [........], 
response.data[i].IP[x].subGridOptions.data = response.data[i].IP[x].BOM; // my data 

위의 모든 작업을 수행하면 데이터가 올바르게 설정된 경우 제대로 작동합니다.