Question

我已编写代码来显示树形结构表，但它不符合我的期望。如果有人帮助我，那就太好了。它应该只显示树形结构而不是表格行内的整个表格。

<script type="text/ng-template"  id="tree_item.html">

  <tr style="width:100%">
    <td></td>
    <td>
      <i class="fa" ng-class="data.folderClass" ng-click="toggleChildren(data)"></i>  {{data.name}}
      <div id="expanded-data" ng-if="data.childrenVisible">
        <table class="table table-striped" id="nested-table">
          <div ng-repeat="data in data.nodes" ng-include="'tree_item.html'"></div>
        </table>
      </div>
    </td>
    <td>
        {{data.name}}
      <div id="expanded-data" ng-if="data.childrenVisible">
        <table class="table table-striped" id="nested-table">
          <div ng-repeat="data in data.nodes" ng-include="'tree_item.html'"></div>
        </table>
      </div>
    </td>
  </tr>

</script>


<table class="table table-striped" border="1">
  <thead>
    <tr>
      <th style="width:30px;"><i ng-click="loadItems()" class="fa fa-refresh blueicon"></i></th>
      <th style="width:auto">Data tree</th>
      <th style="width:auto">example tree</th>
    </tr>
  </thead>
  <tbody ng-repeat="data in treeData" ng-include="'tree_item.html'">

  </tbody>

</table>

</div>

------------------------------ JS ---------------- ---------------

$scope.treeData =  [
  {
    "topic": "Node",
    "completed": "Yes",
    "date" : "2017/12/12",
    "folderClass": "fa-folder",
    "subtopics": [
      {
        "topic": "Node-1",
        "completed": "Yes",
        "date" : "2017/12/12",
        "folderClass": "fa-folder",
        "subtopics": [
            {
              "topic": "Node-1-1",
              "completed": "Yes",
              "date" : "2017/12/12",
              "folderClass": "fa-folder",
              "subtopics": []
            }, {
              "topic": "Node-1-2",
              "completed": "Yes",
              "date" : "2017/12/12",
              "folderClass": "fa-folder",
              "subtopics": []
            }
        ]
      }, 
      {
        "topic": "Node-2",
        "completed": "Yes",
        "date" : "2017/12/12",
        "folderClass": "fa-folder",
        "subtopics": [
            {
              "topic": "Node-2-1",
              "completed": "Yes",
              "date" : "2017/12/12",
              "folderClass": "fa-folder",
              "subtopics": []
            }, {
              "topic": "Node-2-2",
              "completed": "Yes",
              "date" : "2017/12/12",
              "folderClass": "fa-folder",
              "subtopics": []
            }
        ]
      }, {
        "topic": "Node-3",
        "completed": "Yes",
        "date" : "2017/12/12",
        "folderClass": "fa-folder",
        "subtopics": [
            {
              "topic": "Node-3-1",
              "completed": "Yes",
              "date" : "2017/12/12",
              "folderClass": "fa-folder",
              "subtopics": [
                {
                  "topic": "Node-3-1-1",
                  "completed": "Yes",
                  "date" : "2017/12/12",
                  "folderClass": "fa-folder",
                  "subtopics": []
                }, {
                  "topic": "Node-3-1-2",
                  "completed": "Yes",
                  "date" : "2017/12/12",
                  "folderClass": "fa-folder",
                  "subtopics": []
                }
              ]
            }, {
              "topic": "Node-3-2",
              "completed": "Yes",
              "date" : "2017/12/12",
              "folderClass": "fa-folder",
              "subtopics": []
            }
          ]
        }
      ]
    }
  }
];

我想在主题中显示子主题。   树可以是5级。

，结果应该如下图所示。

Answer 1

您可以通过在<table>内创建<td>来实现请看看this codepen或this plunkr

我想使用angularjs显示树级表行

1 个答案: