Javascript 更快地加载HTML表

在UI中呈现表时遇到问题

这些表是基于列表的ng repeat进行渲染的，但是列表的大小很大，因此渲染需要花费很多时间

以下是使用的css：

table {
     width: 100%;
     table-layout: fixed;
     border-collapse: collapse;
     border-spacing: 0;
}
 .wrapper .table-nested {
     background: #fff;
     border: 2px solid #444;
     text-align: left;
}
 .wrapper .table-nested th, .table-nested td {
     padding: 0;
}
 .wrapper .table-nested th + th, .table-nested th + td, .table-nested td + th, .table-nested td + td {
     padding-left: 5px;
}
 .wrapper .table-nested td {
     border-top: 1px solid;
}
 .wrapper .table-nested td[colspan] {
     border: none;
}
 .wrapper .table-nested .cell-input {
     width: 20px;
     border-right: 1px solid;
}
 .wrapper .table-nested .cell-members {
     width: 100px;
}
 .wrapper .table-nested .indent {
     display: inline-block;
}
 .wrapper .table-nested .parent > .cell-name {
     cursor: pointer;
}
 .wrapper .table-nested .parent > .cell-name > .indent {
     margin-right: 5px;
}
 .wrapper .table-nested .parent > .cell-name > .indent:before {
     content: "\f054";
     font-family: FontAwesome;
     display: inline-block;
     -moz-transition: -moz-transform 0.3s;
     -o-transition: -o-transform 0.3s;
     -webkit-transition: -webkit-transform 0.3s;
     transition: transform 0.3s;
}
 .wrapper .table-nested .children {
     display: none;
}
 .wrapper .table-nested .opened > tr > .cell-name > .indent:before {
     -moz-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
}
 .wrapper .table-nested .opened > .children {
     display: table-row;
}

另外，这里是用于呈现表的html

<div class=" wrapper">
    <p>Fields</p>
    <table class="table-nested">
        <thead>
            <tr>
                <th class="cell-input">
                    <!-- <input ng-checked="(list | selected).length == list.length" ng-click="toggleAllCheckboxes($event)" type="checkbox" /> -->
                </th>
                <th>
                    Name
                </th>
                <th class="cell-members">
                    Members
                </th>
                <th>
                    Type
                </th>
                <th>
                    MaxOccurence
                </th>
                <th>
                    Repeat Count
                </th>
            </tr>
        </thead>

        <tbody ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-repeat="item in currentFile.xmlFileAttributes.addNewXmlFileFieldList.xsdElement"></tbody>
    </table>
    <script id="table_tree.html" type="text/ng-template">
        <tr ng-class="{parent: item.elements}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
            <td class="cell-input">
                <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
            </td>
            <td class="cell-name" ng-click="item.opened = !item.opened">
                <div class="indent" style="padding-left: {{15*level}}px"></div>
                {{item.name}}
            </td>
            <td class="cell-members">
                {{item.elements.length}}
            </td>
            <td>
                {{item.type}}
            </td>
            <td>
                {{item.maxOccurs}}
            </td>
            <td>
                <input type="text" ng-model="item.repeatCount" ng-if="item.xPath !== currentFile.xmlFileAttributes.rootNode && item.elements">
            </td>
        </tr>
        <tr class="children" ng-if="item.elements && item.elements.length > 0">
            <td colspan="6">
                <table>
                    <tbody ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-init="level = level + 1" ng-repeat="item in item.elements"></tbody>
                </table>
            </td>
        </tr>
    </script>
</div>

田地

名称
成员
类型
最大发生
重复计数
{{item.name}
{{item.elements.length}
{{item.type}
{{item.maxOccurs}

我需要的是一种方法来优化它，我应该以某种方式改变列表还是使用一些js来快速渲染它

以下是JS代码：

$scope.toggleAllCheckboxes = function($event) {
    var i, item, len, ref, results, selected;
    selected = $event.target.checked;
    ref = $scope.list;
    results = [];
    for (i = 0, len = ref.length; i < len; i++) {
        item = ref[i];
        item.selected = selected;
        if (item.elements != null) {
            results.push($scope.$broadcast('changeChildren', item));
        } else {
            results.push(void 0);
        }
    }
    return results;
};

$scope.initCheckbox = function(item, parentItem) {
    return item.selected = parentItem && parentItem.selected || item.selected || false;
};

$scope.toggleCheckbox = function(item, parentScope) {
    if (item.elements != null) {
        $scope.$broadcast('changeChildren', item);
    }
    if (parentScope.item != null) {
        return $scope.$emit('changeParent', parentScope);
    }
};

$scope.$on('changeChildren', function(event, parentItem) {
    var child, i, len, ref, results;
    ref = parentItem.elements;
    results = [];
    for (i = 0, len = ref.length; i < len; i++) {
        child = ref[i];
        child.selected = parentItem.selected;
        if (child.elements != null) {
            results.push($scope.$broadcast('changeChildren', child));
        } else {
            results.push(void 0);
        }
    }
    return results;
});

$scope.$on('changeParent', function(event, parentScope) {
    var children;
    children = parentScope.item.elements;
    parentScope.item.selected = $filter('selected')(children).length === children.length;
    parentScope = parentScope.$parent.$parent;
    if (parentScope.item != null) {
        return $scope.$broadcast('changeParent', parentScope);
    }
});

$scope.toggleAllCheckboxes=函数（$event）{
变量i，项目，长度，参考，结果，选定；
选中=$event.target.checked；
ref=$scope.list；
结果=[]；
对于（i=0，len=ref.length；i

---

欢迎您提供任何建议。

您可以尝试使用Angular Material提供的mdVirtualRepeat，它可以在用户滚动时检索数据，从而使加载大型数据集更加平滑和快速

请参阅链接：

我尝试了以下内容：

tr class="children" ng-if="item.elements && item.elements.length > 0 && item.opened"

成功了

---

谢谢大家

事实上，我想出来了，所需要的改变就是这样：。谢谢你的回答：）