100+ 列 10 行渲染性能在 ui-grid 中非常差

Question

如果我有 1000 多行和 10 到 30 列它工作正常，但如果我有 10 行和 200 多列，渲染需要 2 到 3 分钟。

一段时间后，水平滚动时数据不可见。 最终，页面变得无响应。

代码在这里：

$http.post($scope.url + "/getPagingRecordImportedTable", {
    dbname : $stateParams.dbname,
    tableName : tablename,
    pageNumber : 1 
}).success(function(response) {
    $scope.names = response.records;
    $scope.mdata = response.metadata;
    $scope.gridOptions.data = response.records;
    var columnsize = 0;
    for (var obj in $scope.mdata) {
        if ($scope.mdata[obj]['columnsize'] > 20) {
            columnsize = 20;
        } else {
            columnsize = $scope.mdata[obj]['columnsize'];
        }
        $scope.columns.push({
            field : $scope.mdata[obj]['columnname'],
            width : columnsize
        });
    }
    console.log("-----------Data received");
})

触发 http 请求后，立即打印-------------Data received日志，但渲染数据需要太多时间。

如何提高性能？ 或者是否有其他 API 可用于大行和 200 多列？！

Answer 1

去年我不得不处理类似的事情，并在一篇文章Rendering large data with AngularJS 1.4 (ft. Polymer 0.5) 中总结了我的想法。

基本上， 我建议使用 Polymer 组件中的<iron-list> ，尽管它需要一些重构（取决于您的用例）。

如果您不能或不想使用<iron-list>尽量使用一次性绑定。

Answer 2

我可以通过让观察者单独为行和列触发来解决这个问题。 我早些时候一起更新了 gridOptions.colDefs 和 gridOptions.data。 然后改成：

1. gridOptions.colDefs = 新设置...
2. $timeout(function() { gridOptions.data = 新数据... },500, true);

它的作用就像魅力一样。 显然，可以通过点击和试用数据和列长度来调整超时值。