1

ng-table拡張可能なノード/ツリービューを作成するように変更しようとしていますが、

プランカーの例

JSON 構造は、ID に基づいて指定されます。

 [
      {
        "BodyId": 1,
        "TrId": null,
        "TdId": null,
        "Title": "BodyId1",
        "Status": "Ok"
      }, {
        "BodyId": 2,
        "TrId": null,
        "TdId": null,
        "Title": "BodyId2",
        "Status": "Ok"    
      }, {
        "BodyId": 3,
        "TrId": null,
        "TdId": null,
        "Title": "BodyId3",
        "Status": "Ok"    
      }, {
        "BodyId": 1,
        "TrId": 1,
        "TdId": null,
        "Title": "TrId1",
        "Status": "Ok"    
      }, {
        "BodyId": 1,
        "TrId": 2,
        "TdId": null,
        "Title": "TrId2",
        "Status": "Ok"    
      }, {
        "BodyId": 2,
        "TrId": 1,
        "TdId": null,
        "Title": "TrId1",
        "Status": "Ok"    
      }, {
        "BodyId": 2,
        "TrId": 2,
        "TdId": null,
        "Title": "TrId2",
        "Status": "Ok"    
      }, {
        "BodyId": 3,
        "TrId": 1,
        "TdId": null,
        "Title": "TrId1",
        "Status": "Ok"    
      }, {
        "BodyId": 3,
        "TrId": 2,
        "TdId": null,
        "Title": "TrId2",
        "Status": "Ok"   
      }, {
        "BodyId": 1,
        "TrId": 1,
        "TdId": 1,
        "Title": "TdId1",
        "Status": "Ok"    
      }, {
        "BodyId": 1,
        "TrId": 1,
        "TdId": 2,
        "Title": "TdId2",
        "Status": "Ok"    
      }, {
        "BodyId": 1,
        "TrId": 2,
        "TdId": "1",
        "Title": "TdId1",
        "Status": "Ok"    
      }, {
        "BodyId": 2,
        "TrId": 1,
        "TdId": 1,
        "Title": "TdId1",
        "Status": "Ok"   
      }, {
        "BodyId": 2,
        "TrId": 1,
        "TdId": 2,
        "Title": "TdId2",
        "Status": "Ok"    
      }, {
        "BodyId": 2,
        "TrId": 2,
        "TdId": 1,
        "Title": "TdId1",
        "Status": "Ok"    
      }, {
        "BodyId": 3,
        "TrId": 3,
        "TdId": 1,
        "Title": "TdId1",
        "Status": "Ok"    
      }]

次の方法で親ノードを表示できました。

   <tbody>
        <tr ng-repeat="node in $data" ng-show="node.TrId == null && node.TdId == null">
            <td ng-repeat="column in columns" ng-show="column.visible " sortable="column.field">
                <span ng-show="column.field == 'Title'"><i class="glyphicon" ng-class="{'glyphicon-minus' : node.expanded, 'glyphicon-plus' : !node.expanded}"></i></span>  
                {{node[column.field]}}
            </td>
        </tr>
   </tbody>

ここでは、各親ノードの下に対応する子ノードをアタッチし、クリック後にすべてを展開可能にする方法がわからないため、行き詰まっています。

この JSON 構造を解析して JSON に変更すると、この問題が解決しやすくなりますか?

[{
    BodyId: 1,
    TrID: [{
        Id: 1,
        TdId: [{
            Id: 1,
            Name: "Td1"
        },
        {
            Id: 2,
            Name: "Td2"
        }]
    }]
}]
4

1 に答える 1

1

わかりましたので、誰かが ng-table ソリューションのツリービューを必要とする場合に備えて、私は自分の質問に対する答えを持っています:

プランカー

<tr ng-repeat="user in $data">
    <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field">
        <div  ng-click="isLevel1Collapsed = !isLevel1Collapsed">
          <span ng-class="{'glyphicon glyphicon-plus':isLevel1Collapsed,'glyphicon glyphicon-minus': !isLevel1Collapsed}" ng-if="user.children.length > 0 && column.field === 'name'" ></span>
            {{user[column.field]}}
        </div>
        <div ng-repeat="level1 in user.children">
          <div ng-if="column.field === 'name'" collapse="isLevel1Collapsed">
            <span style="margin-left: 20px;" ng-class="{'glyphicon glyphicon-plus':isLevel2Collapsed,'glyphicon glyphicon-minus': !isLevel2Collapsed}" ng-click="isLevel2Collapsed = !isLevel2Collapsed">
              {{level1.jobTitle}}
            </span>
              <div collapse="isLevel2Collapsed">
                <div ng-repeat="level2 in level1.children" ng-if="column.field === 'name'">
                    <span style="margin-left: 40px;">{{level2.car}}</span>
                </div>
              </div>
            </div>
        </div>
    </td>
</tr>

JSON データ構造:

[{
    name: "Jacob",
    age: 27,
    children: [{
        jobTitle: "Engineer2",
        children: [{
            car: "bmw1",
            year: 2009
        },
        {
            car: "audi",
            year: 2010
        }]
    }]
},
{
    name: "Enos",
    age: 34,
    children: [{
        jobTitle: "Cheef",
        children: [{
            car: "bmw3",
            year: 2009
        },
        {
            car: "audi",
            year: 2010
        }]
    }]
},
{
    name: "Noea",
    age: 43,
    children: []
},
{
    name: "Jacob",
    age: 27,
    children: [{
        jobTitle: "Fireman",
        children: [{
            car: "bmw6",
            year: 2009
        },
        {
            car: "audi",
            year: 2010
        }]
    }]
},
{
    name: "Nephi",
    age: 29,
    children: [{
        jobTitle: "Policeman",
        children: [{
            car: "bmw7",
            year: 2009
        },
        {
            car: "audi",
            year: 2010
        }]
    }]
},
{
    name: "Enos",
    age: 34,
    children: [{
        jobTitle: "Bakerman",
        children: [{
            car: "bmw8",
            year: 2009
        },
        {
            car: "audi",
            year: 2010
        }]
    }]
},
{
    name: "Enos",
    age: 34,
    children: [{
        jobTitle: "Teacher",
        children: [{
            car: "bmw11",
            year: 2009
        },
        {
            car: "audi",
            year: 2010
        }]
    }]
}];
于 2014-09-14T20:12:31.250 に答える