Question

在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>

我需要的是一种优化此方法的方法，我应该以某种方式更改列表还是使用一些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);
    }
});

欢迎提出任何建议。

Answer 1

我尝试过这个：

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

成功了！

谢谢！

Answer 2

您可以尝试使用Angular Material提供的mdVirtualRepeat，该mdVirtualRepeat可以在用户滚动时检索数据，从而使海量数据集的加载更加流畅和快捷。

引用链接：https://material.angularjs.org/latest/api/directive/mdVirtualRepeat

更快地加载HTML表格

2 个答案: