角度網格多層嵌套

Question

我正在使用角度Ui-grid。試圖實現多層嵌套。有人已經在uiGrid github提出這個問題。但是這個解決方案似乎不起作用。

我改變了JSON，如this。我正試圖形成嵌套的子網格。

下面是我的代碼

$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）看起來像

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

當我將數據傳遞給UI網格爲第二級網格嵌套，它拋出未定義。

有沒有人有成功，直到現在實現擴展UI網格多2或3級。如果是的話，請分享一下或者小提琴或者詳細的解釋會非常有幫助！

Answer 1

我現在有這個工作。我假設你已經構建了適當的數據綁定在3個級別。我假設你也有2級網格（父網格的行擴展爲顯示子網格）。下面是我添加到這個工作中的關鍵部分：

頂層網格在定義它的div標記中有指令ui-grid-expandable。這是位於我的HTML視圖。

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

頂層網格在其gridOptions（angularJS）中定義了一個expandableRowTemplate。

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

頂級網格的expandableRowTemplate將包含一個div標籤定義另一個「UI網」，並已指令「UI電網擴張」。

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

第2級網格有其subGridOptions和columnDefs建在飛行時，數據在angularJS被綁定（關閉的$ http.get（）對我來說）。此時，您需要在該二級網格上指定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 

的第二級網格的expandableRowTemplate需要定義與「UI-電網」 div標籤，指示網格呈現爲每一行嵌套網格。它不需要擴展的指令（但你可以添加一個去深度4級）。我的稱爲MultiLevelTemplate。

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

現在在同一個angularJS塊，你在哪裏建立每行的gridOptions和columnDefs上的蒼蠅，你需要通過數據的層面去反覆的另一個層次。這將允許您爲第三級網格定義subGridOptions和columnDefs。所以你在「我」循環中，並在其中啓動一個「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 

如果你做了以上所有的工作，如果你的數據設置正確，它應該能夠正常工作。