智能表在显示大数据集时性能下降

时间:2017-02-08 14:01:44

标签: javascript html angularjs ng-repeat smart-table

我试图使用智能表显示大型数据集。我用$ http请求联系服务器,当我将响应数据分配给$ scope.rowCollection时,应用程序停留了近40秒,直到所有数据都显示在页面上。作为回应,json我得到了近18000个结果。我不知道我做错了什么。我在600毫秒内收到服务器的响应,但在分配应用程序卡住后。看起来smart-table正试图在displayedCollection数组中制作一个响应的副本,这个操作需要很长时间,但这只是我的看法。请帮忙。提前谢谢。

HTML

 <table st-table="displayedCollection" st-safe-src="rowCollection" class="table">
    <thead>
        <tr>
            <th colspan="8"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
        </tr>
        <tr>
            <th st-sort="TestEndDate">Test Date</th>
            <th st-sort="Workplace">Workplace</th>
            <th st-sort="Tester">Worker</th>
            <th st-sort="SerialNo">Serial Number</th>
            <th st-sort="TestProgram">Testing program</th>
            <th st-sort="TestResult">Test Result</th>
            <th>Download</th>
            <th>Detail</th>
        </tr>

    </thead>
    <tbody>
        <tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in displayedCollection">
            <td>{{row.TestEndDate | date}}</td>
            <td>{{row.Workplace}}</td>
            <td>{{row.Tester}}</td>
            <td>{{row.SerialNo}}</td>
            <td>{{row.TestProgram}}</td>
            <td>{{row.TestResult}}</td>
            <td>
                <button type="button" ng-click="downloadItem(row)" class="btn btn-sm btn-success">
                    <i class="glyphicon glyphicon-download">
                    </i>
                </button>
            </td>
            <td>
                <button type="button" ng-click="detailItem(row)" class="btn btn-sm btn-primary">
                    <i class="glyphicon glyphicon-eye-open">
                    </i>
                </button>
            </td>
        </tr>
    </tbody>
</table>

的Javascript

        app.controller('AppController', ['$scope', '$http', '$modal', function ($scope, $http, $modal) {

    var search = this;
    search.serials = [];

    $scope.rowCollection = [];


    $scope.init = function () {
        waitingDialog.show();//show loading 
        getTestResults();

    };

    var getTestResults = function () {
        $http({
            method: 'GET',
            url: "http://sqldev/api/testresults"
        }).then(function successCallback(response) {
            $scope.rowCollection = response.data;//after assign response.data into rowCollection application stuck
            waitingDialog.hide();//hide loading

        }, function errorCallback(response) {
            console.log('Error: ' + response);
            waitingDialog.hide();//hide loading
            $scope.open()//open modal with error message
        });

    };
}]);

0 个答案:

没有答案