我有性能问题,我找不到解决方案.
上下文:我需要在表中显示大量数据(500行,8列).为了显示这些数据我选择使用Smart-table,因为它提供了很好的功能,但问题是我有很多数据,显示数据的时间很长(5-9秒,这取决于设备性能).
重要的是:我需要显示所有数据,所以我不想要分页方法,限制过滤器.
所以这段代码正在运行:
<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" > <table st-table="tableaux" class="table table-striped"> <thead> <tr> <th ng-repeat="column in ColumnTable">{{column.Label}}</th> </tr> <tr> <th ng-repeat="column in ColumnTable"> <input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/> </th> </tr> </thead> <tbody> <tr ng-repeat="row in tableaux"> <td ng-repeat="column in ColumnTable" ng-init="colonne = column.Id">{{row[colonne]}}</td> </tr> </tbody> </table> </ion-scroll>
我读到Ionic做了一个指令(collection-repeat),它允许一个应用程序显示大量的项目列表比ng-repeat更高效.所以我尝试用collection-repeat重新制作我的解决方案,但这不起作用……
<ion-scroll class="scrollVertical"> <table st-table="tableaux" class="table table-striped"> <thead> <tr> <th ng-repeat="column in ColumnTable">{{column.Label}}</th> </tr> <tr> <th ng-repeat="column in ColumnTable"> <input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/> </th> </tr> </thead> <tbody> <tr collection-repeat="row in tableaux" item-width="200px" item-height="100px"> <td collection-repeat="column in ColumnTable" ng-init="colonne = column.Id" item-width="100px" item-height="100px">{{row[colonne]}}</td> </tr> </tbody> </table> </ion-scroll>
解决方法
您使用的是什么版本的Ionic?如果您使用的是版本1.0 beta 14或更高版本,请使用
bind once(Angular 1.3中的原生版本)
它会是这样的.
<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" > <table st-table="tableaux" class="table table-striped"> <thead> <tr> <th ng-repeat="column in ::ColumnTable">{{::column.Label}}</th> </tr> <tr> <th ng-repeat="column in ::ColumnTable"> <input st-search="{{::column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/> </th> </tr> </thead> <tbody> <tr ng-repeat="row in ::tableaux"> <td ng-repeat="column in ::ColumnTable" ng-init="colonne = column.Id">{{::row[colonne]}}</td> </tr> </tbody> </table> </ion-scroll>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。