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

Question

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

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

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

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

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

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

例子：

-------------------------------------------------- ------------------------------
| 姓名 | 正则表达式 | 时间 | 规则 |
-------------------------------------------------- ------------------------------
| 完整 | (^) \b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[AZ]{2,4}\b | 2012-10-01 | 2b |
| 短 | [0-9a-f]{64} | 2012-11-23 | 1 |
| 要长 | (>) ^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.(?:[AZ]{2}...| 2012-11-27 | 2a |
-------------------------------------------------- ------------------------------

我有什么（更新）

没有省略号的解

指示

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();
            });
        }
    };
});