Question

我正在创建一个有角度的js指令，该指令可以冻结右侧的表列。当基本上水平滚动时，我们将开始显示列。为了移动列，我正在动态应用CSS的 transform 。

在加载时，我正在将变换属性应用于要冻结的单元格。滚动后，分别更新其他单元格的transform属性。效果很好，但是我看到一些问题，如下所示：

在水平滚动时，冻结的列也在移动，这是不应该发生的。
结尾处没有空格。
滚动条上的列之间有些间隙，看起来也很丑。

为此创建了一个demo。谁能帮忙吗？ 指令代码：

(function () {
'use strict';

angular
     .module('app')
     .directive('fixedColumnTable', fixedColumnTable);

fixedColumnTable.$inject = ['$timeout'];

function fixedColumnTable($timeout) {
    return {
        restrict: 'A',
        scope: {
            fixedColumns: "@"
        },
        link: function (scope, element) {
            var container = element[0];

            function activate() {
                setInitialTransform('thead tr', 'th');
                setInitialTransform('tbody tr', 'td');
                applyClasses('thead tr', 'moveable-header-cells', 'th');
                applyClasses('tbody tr', 'moveable-body-cells', 'td');

                var  moveableHeadCells= [].concat.apply([], container.querySelectorAll('thead th.moveable-header-cells'));
                var topHeaders = [].concat.apply([], container.querySelectorAll('thead th'));
                var moveableBodyCells = [].concat.apply([], container.querySelectorAll('tbody td.moveable-body-cells'));

                container.addEventListener('scroll', function () {
                    var x = container.scrollLeft;
                    var y = container.scrollTop;

                    //Update the left header positions when the container is scrolled
                    moveableHeadCells.forEach(function (cell) {
                        cell.style.transform = translate(-x, 0);
                    });

                    moveableBodyCells.forEach(function (cell) {
                        cell.style.transform = translate(-x, y);
                    });
                }); 

                function setInitialTransform(selector, cell) {
                    var arrayItems = [].concat.apply([], container.querySelectorAll(selector));
                    var currentElement, prevElement, rowCells;
                    arrayItems.forEach(function (row, i) {
                        var numFixedColumns = parseInt(scope.fixedColumns);
                        for (var j = numFixedColumns; j > 0; j--) {
                            rowCells = angular.element(row).find(cell);
                            currentElement = rowCells[rowCells.length - j];
                            prevElement = rowCells[rowCells.length - (j + 1 )];
                            console.log(prevElement);
                            currentElement.style.transform = 'translate('+ -prevElement.offsetWidth + 'px)';
                            currentElement.classList.add('fixed-cell');
                        }
                    });
                }

                function translate(x, y) {
                    return 'translate(' + x + 'px, ' + y + 'px)';
                }

                function applyClasses(selector, newClass, cell) {
                    var arrayItems = [].concat.apply([], container.querySelectorAll(selector));

                    function isFixedColumn (val) {
                        return !val.classList.contains('fixed-cell');
                    }

                    arrayItems.forEach(function (row, i) {
                        angular.element(Array.from(angular.element(row)
                               .find(cell))
                               .filter(isFixedColumn))
                               .addClass(newClass);
                    });
                }
            }

            $timeout(function () {
                activate();
            }, 0);

            scope.$on('refreshFixedColumns', function() {
                $timeout(function () {
                    activate();
                    container.scrollLeft = 0;
                }, 0);
            });
        }
    };
}})();

冻结表的最后一栏问题

0 个答案: