Asp.net mvc 使用angular和MVC显示大型数据表

我们试图在网页上显示大量数据。 数据被缓存，并通过angular加载（允许实际页面先加载，然后为网格获取数据）

所有工作正常，但一旦收到数据，页面将冻结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>

有没有一种方法可以真正只构建屏幕上显示的表的一部分，以避免这种1-3秒的呈现/对行和列的表进行某种延迟加载

---

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

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

问题可能是浏览器的呈现类型。 所有浏览器都会在所有列和行完成时呈现表格，因此您的数据会延迟呈现。有一个选项可以进行适当的更改，以便在div中呈现所有内容，或者尝试以下加快表格布局的方法

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

{{somat.ColumnHeader}
{{somat.ColumnValue}

试试ngGrid；我相信它使用了列/行渲染，这样浏览器就不会渲染屏幕上未显示的项目。如果您的问题确实是浏览器渲染问题，这应该会有所帮助。@Reboog711谢谢，刚刚查看了ng网格，默认情况下是否启用了此类功能？我不确定“启用”是什么意思。它不是AngularJS的一部分；但是有一个单独的库，所以你必须下载它并将其添加到你的应用程序中（通过一个JS脚本标记），我想把它作为一个参数传递到你的模块定义中。我们目前正在为其他需要排序等的表使用ng grid，但是，在文档中看不到“延迟加载”。我们需要为此做些什么吗？我认为延迟加载是根据需要从服务器加载数据的行为。我不知道ngGrid是否具有该功能。然而，我认为ngGrid的构建只是为了呈现屏幕上显示的项目，而不是屏幕外显示的项目。我可能错了；这就是为什么我没有提供一个正式的答案。嗨，我们刚刚测试了这个，不幸的是，没有效果。滚动时滚动也会出现口吃，我认为这可能与列数有关，而不是与行数有关？当然可能。您确定问题是w/rendering，而不是将数据从服务器传输到客户端吗？我在一个应用程序上工作，在某些情况下，加载的数据量可能相当于一个小mp3。

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