1

我正在尝试修改ng-table以创建可扩展的节点/树视图，

Plunker 示例

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 回答