使用角度和MVC显示大型数据表

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

所有工作正常，但是一旦数据已收到，页面冻结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秒渲染/行和列的表的某种延迟加载？

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

来源

2014-03-06 Simon

尝试ngGrid;我相信它使用了列/行渲染，因此浏览器不会渲染未在屏幕上显示的项目。如果你的问题确实是浏览器渲染，这应该有所帮助。 – JeffryHouser

@Reboog711谢谢，只是看了一下ng网格，默认情况下是这种类型的功能吗？ – Simon

我不确定你的意思是“上”。它不是AngularJS的一部分;而是一个单独的库，因此您必须下载它并将其添加到您的应用程序（通过JS脚本标记），并且我认为将它作为参数传递到您的模块定义中。 – JeffryHouser

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

来源

2014-03-06 20:01:39 JeffryHouser

嗨，我们刚刚测试过这个，不幸的是，它没有效果。滚动时滚动也会出现断断续续的情况，我认为这可能与列数而不是行数有关。 – Simon

绝对有可能。你确定问题在于渲染而不是说将数据从服务器传输到客户端？我在一个应用程序上工作，在某些情况下，加载的数据量可能相当于一个小mp3。 – JeffryHouser

问题可能是<表格>呈现类型的浏览器。所有浏览器在所有列和行都完成时呈现表格，因此您的数据会延迟呈现。有一个选项可以进行适当的更改，以便呈现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>

来源

2014-03-07 11:53:59 gtzoumis

使用角度和MVC显示大型数据表

回答

相关问题