gpt4 book ai didi

javascript - 更快地加载 HTML 表格

转载 作者:行者123 更新时间:2023-11-27 23:02:44 26 4
gpt4 key购买 nike

我在 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);
}
});

欢迎提出任何建议。

最佳答案

我试过这个:

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

成功了!!

谢谢大家!

关于javascript - 更快地加载 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51720794/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com