角度Ui-Gridマルチレベルネスト

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> 

私が第2レベルのネストされたグリッドのUIグリッドにデータを渡すと、それはスローのように見えています未定義。

2つまたは3つ以上のレベルの拡張可能なUIグリッドを実装することが今まで成功していますか。はいの場合は、プランナーやフィドルを共有してください。詳細な説明は本当に役に立ちます！

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は別の「UI-グリッド」を定義し、指令「UI-グリッド拡張」を持つdivタグが含まれています。

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

第2レベルのグリッドは（私にとって）（$ http.getオフ）のデータがangularJSにバインドされているときに、その場で構築されたそのsubGridOptionsとcolumnDefsを持っています。この時点で、第2レベルのグリッドにexpandableRowTemplateプロパティを指定して、それを展開して第3レベルのグリッドを表示するように指示する必要があります。

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 

上記をすべて実行すると、データが正しく設定されていれば正しく動作するはずです。