Как вы дублируете функциональность "замораживание панели" в таблице HTML?

У меня есть виджет в проекте ASP.NET, который я разрабатываю для своей работы. Он должен быть 300 пикселей в ширину и не может быть шире. К сожалению, для такого маленького виджета оказалось довольно сложным, что они хотят. Вот что я имею прямо сейчас:

http://www.codetunnel.com/content/images/widget/currentWidget.jpg

Как вы можете видеть, это элемент управления jQuery UI-аккордеона. По мере того, как каждая панель аккордеона расширяется, выполняется аякс-вызов для загрузки его содержимого асинхронно. Сейчас он выплескивает таблицу HTML, содержащую требуемые данные. Таблица находится в пределах DIV со стилем overflow: auto;, так что мы получаем полосы прокрутки внизу и справа.

Моя проблема в том, что мне нужны некоторые довольно настраиваемые функции (например, способность замораживания в excel). При прокрутке влево и вправо я хочу, чтобы все строки, включая заголовок, прокручивались влево и вправо, за исключением левого столбца "имя продукта". Вот так:

http://www.codetunnel.com/content/images/widget/scrollRight.jpg

При прокрутке вверх и вниз я хочу, чтобы все столбцы, включая левый столбец, прокручивались вверх и вниз, за исключением строки заголовка. Вот так:

http://www.codetunnel.com/content/images/widget/scrollDown.jpg

Каков наилучший способ достижения этой функциональности? Или есть способ?

Ответ 1

Я построил нечто похожее, но гораздо менее сложное: я хотел, чтобы первая строка таблицы (заголовки) была заморожена, а строки данных прокручивались вертикально. Я реализовал его как две разные таблицы, каждая с ячейками фиксированной ширины, каждая в своем DIV. "Header" div просто сидел статичным, а "body" div использовал переполнение: авто для прокрутки.

Ваша проблема сложнее, потому что вы хотите "заморозить панели" на обеих осях и поддерживать прокрутку по обоим осям (у меня было гораздо больше недвижимости для работы, и вам не приходилось учитывать горизонтальную прокрутку по все). Тем не менее, мне интересно, можете ли вы начать с этой должности и работать оттуда...

Определить 4 divs:

NW: этот не прокручивается вообще, никогда. Это ячейка "product name" в вашем примере
NE: этот прокручивается только по горизонтали. Это строка заголовка/заголовка в вашем примере
SW: этот только свиток только по вертикали. Это левый столбец в вашем примере
SE: этот прокручивает оба направления. Это первичная сетка данных в вашем примере

С 4 DIVs вы будете иметь дело с 4 различными таблицами, поэтому нам нужно будет поддерживать ширину своих ячеек и высоту ячеек. В идеале мы могли бы сделать это во время рендеринга, если мы сможем сделать их фиксированными значениями. В противном случае мы могли бы написать jquery/JS на стороне клиента, чтобы перебирать ячейки в таблице SE, когда страница сначала загружает (или изменяет размер), и заставляет размер других таблиц соответствовать им.

С 4 DIVs нам также необходимо синхронизировать прокрутку: когда SE прокручивается горизонтально, NE должен прокручиваться до той же позиции. Когда SE прокручивается вертикально, SW должен прокручиваться до той же позиции. Я подозреваю, что должны быть некоторые события прокрутки на клиентской стороне, которые мы можем подключить, чтобы обнаружить, когда SE прокручивается. В рамках этих событий мы должны иметь возможность принудительно прокручивать NE и/или SW.

Извините, это такой неопределенный/абстрактный ответ. Ничтожному исполнению чего-то подобного потребуется больше времени, чем я мог бы удобно уйти от моей основной работы. Но это то, что дребезжало в моем мозгу, так что я решил поделиться им с вами. Надеюсь, это поможет вам хоть немного приблизиться к решению. Ура!

Ответ 1

Ответ 2