Question

我需要一个带有固定标题行滚动的表。另外，因为我们有大数据（4000行），我需要添加在滚动时加载行的功能。我已经能够添加指令来添加滚动条并在滚动时调用一个事件，但是在滚动的行上没有添加，并且在几次滚动后它给了我＆＃34;长脚本运行错误＆＃34;。我附上了代码，请帮助哪里出错

HTML - ＆GT;

 <table  data-report-table="" report-data="model.ReportData" 
load-rows="loadMoreRows()">
  <thead> <tr> 
<th data-ng-repeat="header in model.tableHeader">{{header}}</th>
 </tr> </thead>
 <tbody> 
<tr data-ng-repeat="row in model.tabledata | limitTo :model.limitRowsTo">
  <td data-ng-repeat="text in row.data">{{text}}</td> 
</tr> </tbody>
 </table>

控制器 - ＆GT;

 $scope.loadMoreRows = function () {
                if ($scope.model.limitRowsTo < $scope.model.tabledata.length) {
                    $scope.model.limitRowsTo += 20;
                }
            };

指令 - ＆GT;

类ReportTable {

public static Factory（BaseService：BaseService）：ng.IDirective { 返回{ 限制：＆＃39; EA＆＃39;，范围： { reportData：＆＃39; =＆＃39;， loadRows：＆＃39;＆amp;＆＃39; }， link：function（scope，element，attrs）{

                // wait for data to load and then transform the table
                scope.$watch(tableDataLoaded, function (isTableDataLoaded) {
                    if (isTableDataLoaded) {
                        ReportTable.fixedHeaderScroll(scope, element, element.is(":visible"), attrs)
                    }
                });

                function tableDataLoaded() {
                    // first cell in the tbody exists when data is loaded but doesn't have a width
                    // until after the table is transformed
                    var firstCell = element[0].querySelector('tbody tr:first-child td:first-child');
                    return firstCell && firstCell.clientWidth;
                }

            }
        };
    }



    public static fixedHeaderScroll(scope, element, visible, attrs) {

        if (!element || !visible) {
            return;
        }


        angular.forEach(element[0].querySelectorAll('tr:first-child th'), function (thElem, i) {

            var tdElems = element[0].querySelector('tbody tr:first-child td:nth-child(' + (i + 1) + ')');

            var columnWidth = tdElems ? tdElems.offsetWidth : thElem.offsetWidth;
            if (tdElems) {
                tdElems.style.width = columnWidth + 'px';
            }
            if (thElem) {
                thElem.style.width = columnWidth + 'px';
            }
        });
        // set css styles on thead and tbody
        angular.element(element[0].querySelectorAll('thead')).css('display', 'block');

        angular.element(element[0].querySelectorAll('tbody')).css({
            'display': 'block',
            'height': '345px' || 'inherit',
            'overflow': 'auto'
        });

        // reduce width of last column by width of scrollbar
        var tbody = element[0].querySelector('tbody');
        var scrollBarWidth = tbody.offsetWidth - tbody.clientWidth;
        if (scrollBarWidth > 0) {
            // for some reason trimming the width by 2px lines everything up better
            scrollBarWidth -= 2;
            var lastColumn = element[0].querySelector('tbody tr:first-child td:last-child');
            lastColumn.style.width = (lastColumn.offsetWidth - scrollBarWidth) + 'px';
        }


        angular.element(tbody).scroll(function () {
            ReportTable.LoadOnScroll(scope, element, visible, attrs);
        })


    }

    public static LoadOnScroll(scope, element, visible, attrs) {

        var visibleHeight = angular.element(element[0]).height();
        var threshold = 10;
        var scrollableHeight = angular.element(element[0]).prop('scrollHeight');
        var hiddenContentHeight = scrollableHeight - visibleHeight;
        var scrollTop = angular.element(element[0]).scrollTop();

        if (hiddenContentHeight - scrollTop <= threshold) {
            // Scroll is almost at the bottom. Loading more rows
            scope.loadRows();
        }
    }

}

neQis.App.Module.directive('reportTable', ['BaseService', ReportTable.Factory]);

}

带有固定标题滚动的角度js表，并将行加载为滚动

0 个答案: