javascript - 表格单元格中的动态可折叠文本

Question

我有例如表包含名称、正则表达式、时间等的正则表达式。除正则表达式外的所有列均具有固定宽度，表格已将宽度设置为 100%，表格在页面布局中位于 div 中。

我需要按照以下规则显示每个正则表达式:

1. 如果正则表达式比列宽短 - 显示完整的正则表达式

2. 如果正则表达式的长度超过列宽
   A。显示完整正则表达式的显示图标，适合列和省略号 (...) 的正则表达式的一部分

   用于显示短正则表达式和完整正则表达式的显示图标

如果调整窗口大小或更改列宽，则必须动态评估所有规则。

示例:

--------------------------------------------------------------------------------| Name    | Regex                                          | Time       | Rule |--------------------------------------------------------------------------------| Full    | (^) \b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b | 2012-10-01 | 2b   || Short   | [0-9a-f]{64}                                   | 2012-11-23 | 1    || To long | (>) ^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.(?:[A-Z]{2}...| 2012-11-27 | 2a   |--------------------------------------------------------------------------------

What I have (updated)

solution without ellipsis

Directive

angular.module('ui.directives').directive('collapsibleText', function ($window, $compile, $timeout) {
    return {
        restrict: 'A',
        require: '^collapsibleText',
        scope: { collapsibleText: '@' },
        template: '<div style="display: inline-block;height: 20px;white-space: nowrap;">'
                    + '<i style="cursor:pointer" ng-hide="textSize < parentSize && !collapsed" ng-class="collapsed && \'icon-collapse\' || \'icon-expand\'" ng-click="changeCollapsed()"></i>'
                    + '<div ng-class="collapsed && \'no-collapsible\' || \'collapsible-text\'">{{collapsibleText}}</div>'
                + '</div>',
        controller: ['$scope', function ($scope) {
            $scope.collapsed = false;

            $scope.getTextSize = function () {
                var paddingLeft = $scope.element.css('paddingLeft'),
                    paddingRight = $scope.element.css('paddingRight');

                var $shadow = angular.element('<span></span>').css({
                    position: 'absolute',
                    paddingLeft: paddingLeft,
                    paddingRight: paddingRight,
                    fontSize: $scope.element.css('fontSize'),
                    fontFamily: $scope.element.css('fontFamily'),
                    lineHeight: $scope.element.css('lineHeight'),
                    resize: 'none',
                    visibility: 'hidden'
                });
                angular.element(document.body).append($shadow);
                $shadow.html($scope.collapsibleText);

                $scope.textSize = $shadow[0].offsetWidth + 20;
                return $scope.textSize;
            };

            $scope.getParentSize = function() {
                $scope.parentSize = $scope.parent[0].offsetWidth;
                return $scope.parentSize;
            };

            $scope.changeCollapsed = function () {
                $scope.collapsed = !$scope.collapsed;
            };
        }],
        link: function (scope, element, attrs, ctrl) {
            scope.element = $(element);
            scope.parent = scope.element.parent();

            scope.getTextSize();

            var w = angular.element($window);
            scope.getWindowDimensions = function () {
                return { 'h': w.height(), 'w': w.width() };
            };
            scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
                scope.getParentSize();
            }, true);

            w.bind('resize', function () {
                scope.$apply();
            });

            $timeout(function () { scope.getParentSize(); }, 0);
        }
    };
});

html

...
<td><span collapsible-text="regex"></span></td>
...

哪里出了问题

• 如果我展开一个正则表达式，其他长的正则表达式虽然比列宽短，但以省略号结尾
• 开始时，所有正则表达式都会折叠图标，直到有人点击该图标

这里有更好的解决方案吗？

Answer 1

我的最终解决方案

angular.module('ui.directives').directive('collapsibleText', function ($window, $timeout) {
    return {
        restrict: 'A',
        require: '^collapsibleText',
        scope: { collapsibleText: '@' },
        template: '<div style="display: inline-block;height: 20px;white-space: nowrap;position: relative;padding-right: 30px;">'
                    + '<i style="cursor:pointer" ng-hide="textSize < parentSize && !collapsed" ng-class="collapsed && \'icon-collapse\' || \'icon-expand\'" ng-click="changeCollapsed()"></i>'
                    + '<div ng-class="collapsed && \'no-collapsible\' || \'collapsible-text\'">{{collapsibleText}}</div>'
                    + '<span ng-hide="textSize < parentSize">...</span>'
                + '</div>',
        controller: ['$scope', function ($scope) {
            $scope.collapsed = false;

            $scope.getTextSize = function () {
                var paddingLeft = $scope.element.css('paddingLeft'),
                    paddingRight = $scope.element.css('paddingRight');

                var $shadow = angular.element('<span></span>').css({
                    position: 'absolute',
                    paddingLeft: paddingLeft,
                    paddingRight: paddingRight,
                    fontSize: $scope.element.css('fontSize'),
                    fontFamily: $scope.element.css('fontFamily'),
                    lineHeight: $scope.element.css('lineHeight'),
                    resize: 'none',
                    visibility: 'hidden'
                });
                angular.element(document.body).append($shadow);
                $shadow.html($scope.collapsibleText);

                $scope.textSize = $shadow[0].offsetWidth + 40;
                return $scope.textSize;
            };

            $scope.getParentSize = function() {
                $scope.parentSize = $scope.parent[0].offsetWidth;
                return $scope.parentSize;
            };

            $scope.changeCollapsed = function () {
                $scope.collapsed = !$scope.collapsed;
                $timeout(function() {
                     angular.element($window).triggerHandler('collapseChanged');
                }, 100);
            };
        }],
        link: function (scope, element) {
            scope.element = $(element);
            scope.parent = scope.element.parent();

            scope.getTextSize();

            var w = angular.element($window);
            w.bind('resize shown collapseChanged', function () {
                scope.getParentSize();
                scope.$apply();
            });
        }
    };
});