Столбец таблицы Изменять размер/Перетаскивать 'n', Заглядывающего jQuery
Я ищу способ реализовать и изменение размеров и перетащить отбрасывание 'n' для столбцов (не строки) в предопределенной таблице с помощью jQuery. Я сделал немного поиска с помощью Google и действительно не нашел ничего, что отвечает всем требованиям, поскольку многие требуют, чтобы Вы по существу восстановили свою таблицу с помощью jQuery. Я просто хочу включить эту функциональность, не иметь мою всю структуру таблицы, продиктованную третьим лицом.
Кто-либо знает о каких-либо плагинах, которые могли бы помочь мне сделать это, и если не там какие-либо Гуру jQuery там, которые уже решили эту проблему?
1 ответ
Я так понимаю, вас не интересует один из существующих плагинов для гридов, таких как jqGrid? Я бы предложил посмотреть на их реализацию, чтобы получить представление о том, как они перетаскивают колонки.
У меня нет конкретного кода для этого, но вот мои первоначальные мысли о том, как подойти к проблеме.
Изменение размеров колонок
Я бы использовал css table-layout: fixed с
<table width="100%" cellspacing="0">
<col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
<tr>...</tr>
</table>
Используйте CSS для размещения невидимого узкого div справа от каждой ячейки заголовка: Затем примените jQuery UI поведение перетаскивания к этому div. Когда div перетаскивается, обновите ширину В качестве альтернативы, когда невидимый div перетаскивается, вы можете преобразовать его в абсолютно позиционированный узкий div, который увеличивается до высоты таблицы. Вам нужно будет перемещать его при перетаскивании мыши и сделать его видимым, чтобы указать, где вы изменяете размер столбцов. Затем, после изменения размера, вы пересчитаете размеры Это может быть сложнее. Я бы начал с применения перетаскиваемого поведения к элементам Как только пользователь перетащит заголовок столбца на один из этих div, вам нужно будет пройтись по каждой строке таблицы и переместить соответствующий Надеюсь, это поможет вам в работе. Я уверен, что где-то есть подобные примеры, если хорошенько поискать. Но большинство элементов управления сеткой имеют гораздо больше возможностей, чем я мог бы реально использовать, а вы, похоже, предпочитаете все упростить. Я просто сделал быстрый поиск в Google и нашел этот плагин. Я еще не смотрел исходники, но судя по демонстрации, похоже, что он использует подход, схожий с тем, что я предлагаю. Похоже, он выполняет свою работу, но, на мой взгляд, выглядит не очень красиво. Полоса изменения размера не выстраивается там, где вы ожидаете, и тому подобное. Но это может помочь. Title , и сделайте его снова невидимым.
Перетаскивание столбцов
. Элементы могут иметь поведение перетаскивания. Таким образом, вы могли бы перетащить любой столбец на один из этих div'ов и опустить его на них. Когда колонка перетаскивается поверх div, div должен стать видимым, и, возможно, высота колонки.
в нужное место. Не забудьте также переместить соответствующие .
UPDATE
Похожие вопросы: