Нужно провести мозговой штурм некоторых идей для высокопроизводительного детектора переполнения - PullRequest
Новая
       4

Нужно провести мозговой штурм некоторых идей для высокопроизводительного детектора переполнения

1 голос
/ 30 октября 2009

Проблема: У меня есть большая таблица, скажем, 20 столбцов и 150 строк. Размер столбцов может быть изменен пользователем (думаю, Excel). Каждая ячейка имеет переполнение: скрытый набор.

  • Когда текст переполняется в любой данной ячейке , я хочу дать пользователю подсказку, что это происходит.

Ограничения:

  • Это должно хорошо работать на IE6. Это означает, что если вы сделаете это в IE6, вы не захотите убивать кого-то во время его использования.

Ответы [ 3 ]

1 голос
/ 16 декабря 2009

Это то, что я в конечном итоге использовал. он работает только в IE, но в данном случае это нормально:

добавить это правило css в контейнер с переполнением: hidden 

text-overflow:ellipsis;
0 голосов
/ 02 ноября 2009

Я думаю, что лучший способ - амортизировать обнаружение переполнения, например, записывая в пользовательское свойство каждый раз, когда пользователь вводит данные в ячейку.

Таким образом, вы будете использовать подход, аналогичный Lobstrosity, но вместо первоначального расчета переполнения вы будете вычислять переполнение каждый раз, когда изменяется вход ячейки. Это имеет очевидный недостаток: он не работает для предварительно заполненных ячеек, в этом случае вам придется рассчитывать его для всех заполненных ячеек при запуске программы.

Другой вариант hardcore - исправить размеры ячейки (другими словами, если размеры ячейки известны во время генерации страницы) и рассчитать переполнение при генерации страницы на стороне сервера (если вы используя язык на стороне сервера). Это плохо, но работает.

0 голосов
/ 30 октября 2009

Предисловие: я понятия не имею, как (или если) это будет работать в IE6.

Возможно, есть и другие способы сделать это, но вы можете использовать вложенные элементы и сравнить их атрибуты offsetHeight: 

 <html>
    <head>
        <style type="text/css">
            td { width: 80px; border: 1px solid #000; }
            td div { height: 20px; overflow: hidden; }
            .highlight { background-color: #efe; }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td><div><span>A B C</div></span></td>
                <td><div><span>D E F G H I J</span></div></td>
                <td><div><span>K L M</span></div></td>
            </tr>
            <tr>
                <td><div><span>N O P</span></div></td>
                <td><div><span>Q R S</span></div></td>
                <td><div><span>T U V W X Y Z</span></div></td>
            </tr>
        </table>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready
            (
                function()
                {
                    $("td div").each
                    (
                        function()
                        {
                            var collapsedHeight = $(this).attr("offsetHeight");
                            var actualHeight = $("span", this).attr("offsetHeight");

                            // if the inner span is taller than the div, make the div green
                            if (actualHeight > collapsedHeight)
                                $(this).addClass("highlight");
                        }
                    );
                }
            );
        </script>
    </body>
 </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...