Question

我们正在尝试在网页上显示大量数据。数据被缓存，并通过角度加载（以允许实际页面首先加载，然后获取网格的数据）

一切正常，但是一旦收到数据，页面会冻结1-3秒，我们假设是由于正在呈现的表。

表的大小可以变化，范围从20列10行到100列100行。

必须加载所有数据，因为它是显示趋势等。

下表： -

<table id="tbl" class="table table-striped table-bordered" ng-repeat="Grid in userresults.Trend">
                <tr ng-repeat="item in Grid" ng-show="$first">
                    <th ng-repeat="somat in item | filter:{ColumnType :'!1'}">
                    {{somat.ColumnHeader}}
                    </th>
                </tr>
                <tr ng-repeat="item in Grid">
                    <td ng-repeat="somat in item | filter:{ColumnType : '!1'}"    >
                    {{somat.ColumnValue}}
                    </td>          
                </tr>        
            </table>

下面是角度： -

  $scope.GetPatientResults = function () {
              $("#ResultsLoader").show();

              var url = "/user/11111/GetUserResults/";

              $http.get(url)
                    .success(function (data) {
                        // if successful, bind success message to message

                        $scope.userresults = data;
                        $("#ResultsLoader").hide();
                        $('#ResultsSummary').show();

                    });
          };

有没有办法实际只构建屏幕上显示的表格的一部分，以避免这种1-3行渲染/某些行和列表的延迟加载？

非常感谢任何帮助/建议，因为这正在影响我们系统的可用性。

Answer 1

一种替代方法可能是尝试使用ngGrid而不是表。我相信ngGrid只会渲染屏幕上看到的项目，而不是一次呈现所有网格项目。如果你的问题确实是浏览器呈现，这种方法应该有所帮助。

Answer 2

问题可能是＆lt; table＆gt;渲染类型的浏览器。当所有列和行完成时，所有浏览器都会呈现表，因此您的数据会延迟渲染。有一个选项可以进行适当的更改，以便在div中呈现所有内容，或者尝试使用以下link来加速表格布局。

<div id="tbl" style="float:left;" ng-repeat="Grid in userresults.Trend">
            <div  style="float:left;" ng-repeat="item in Grid" ng-show="$first">
                <div style="float:left;width:200px;" ng-repeat="somat in item | filter:{ColumnType :'!1'}">
                {{somat.ColumnHeader}}
                </div>
            </div>
            <div style="float:left;" ng-repeat="item in Grid">
                <div style="float:left;width:200px;" ng-repeat="somat in item | filter:{ColumnType : '!1'}">
                {{somat.ColumnValue}}
                </div>          
            </div>        
        </div>

使用angular和MVC显示大型数据表

2 个答案: