Перемещение столбцов таблицы, текст всегда в первом столбце
Доброго времени суток.
Я не селен в jquery. Прошу помощи, примером. Реализовал перемещение столбцов в таблице подключением библиотеки jquery.sorttable.js столбцы успешно перетягиваются, их можно менять местами. Но теперь возникла потребность что бы в первом столбце всегда были поясняющие названия в независимости от перемены столбцов местами. То есть в таблице например 2 столбца в какой то из <td> написано сверху Город под городом написано Москва, меняем столбцы местами и слово Город опять остается в первом столбце, во втором его нету. пытался найти всегда первый столбец, но не смог понять как его точно определять. if ($('#ex4 td > *:nth-child(1)')) { $('#textInOnetd').css({"display": "block"}); } Но так все равно не получается точно определять нужные <td> |
Dolf,
сделайте минимальный пример |
рони,
Допустим у меня есть таблица: <table id="ex4"> <tbody> <tr class="headerrow"> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr><td>Город<br>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr> <tr><td>Улица<br>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr> </tbody> </table> id="ex4" нужен для того что бы сделать ее draggable. После подключения js скрипта jquery.sorttable.js https://github.com/dbrink/sorttable/archive/master.zip в табличке столбцы можно перетаскивать. И вот теперь задача: При перетаскивании столбцов только у первого столбца всегда должны быть не меняющиеся данные это Город и Улица и только всегда в первом столбце таблицы. В перовом <td>. Пример есть еще такой на https://auto.ru/compare-offers/. Там прям видно если меняешь местами столбцы то в первом столбце всегда есть поясняющие данные, он не перетягиваются во второй столбец при перемещении. Во втором столбце их просто нет. |
Dolf,
не могу помочь, не понимаю ваших пояснений. |
Как же объяснить).
Есть таблица в которой каждый столбец перетаскиваемый (можно поменять местами с другим столбцом). Красными стрелками виделил то что столбцы можно менять местами. Где подчеркнуто под названием - реализовано так что когда столбцы таблицы меняются местами, эти надписи всегда остаются в первом столбце. Как такое сделать? |
|
|
Цитата:
|
Цитата:
http://dbrink.github.io/sorttable/examples.html Третий пример. |
voraa,
https....examples.html |
Все столбцы перемещаются, но поясняющие названия только в первом столбце. Если его переместить то и названия "уедут" в другое место, столбец же окажется например в середине (с поясняющими названиями). Так вот надо что бы при перемещении столбцов поясняющие названия всегда были в первом столбце, как на скриншоте. https://prnt.sc/11511r7
То-есть перемесил столбцы местами данные, а поясняющие название опять в первом столбце и так всегда, вне зависимости от перемещения столбцов. |
Цитата:
Я этот адрес не вручную пишу, а копирую из адресной строки Этот же адрес указан и тут https://github.com/dbrink/sorttable |
Цитата:
|
Ребята, ну посмотрите, пожалуйста, на https://auto.ru/ добавьте пару машин в сравнение и все понятно будет. Я просто уже не знаю как написать.
|
Dolf,
что вам мешает создать создать надписи в отдельном столбце? |
Ну скажем так, нельзя в отдельном (от слова совсем). Конечно я бы сделал в отдельном, но надо как на авто.ру) По этому прошу натолкнуть примером как всегда находить этот первый столбец и именно там показывать статичные записи, а везде скрывать.
|
Dolf,
тогда кешируйте надписи и по событию stop перемешайте их через 51 миллисекунду в первую ячейку |
Dolf,
для структуры представленной вами выше это будет так ... $(function() { var text = [...document.querySelectorAll('#ex4 tr td:first-child')].map(({childNodes})=> [...childNodes].slice(0,2)); $('#ex4').sorttable({ helperCells: null, placeholder: 'placeholder', stop: function( event, ui ) { setTimeout(_=> document.querySelectorAll('#ex4 tr td:first-child').forEach((td,i) => td.prepend(...text[i])), 130) } }).disableSelection(); }); |
Цитата:
Цитата:
Приведите пример таблицы из 3-4 столбцов. |
Цитата:
let firstcolumn = table.querySelectorAll('tr>*:first-child') Т.е. надписи есть во всех столбцах, но показывать их нужно только в первом? Тогда так можно <style> #tb td:not(:first-child)>.nadpis { visibility: hidden; } </style> <body> <table id=tb> <tr> <td><span class='nadpis'>Line1</span><br>1-1<td> <td><span class='nadpis'>Line1</span><br>1-2<td> <td><span class='nadpis'>Line1</span><br>1-3<td> </tr> <tr> <td><span class='nadpis'>Line2</span><br>2-1<td> <td><span class='nadpis'>Line2</span><br>2-2<td> <td><span class='nadpis'>Line2</span><br>2-3<td> </tr> <tr> <td><span class='nadpis'>Line3</span><br>3-1<td> <td><span class='nadpis'>Line3</span><br>3-2<td> <td><span class='nadpis'>Line3</span><br>3-3<td> </tr> </table> </body> |
рони,
Спасибо Вам! Я вот именно про это и говорил. |
рони,
Только еще самую малость изменил. У меня в самом первом td кнопки удаления строки. Поэтому обращаюсь ко второй) $(function() { var text = [...document.querySelectorAll('#ex4 tr td:nth-child(2)')].map(({childNodes})=> [...childNodes].slice(0,2)); $('#ex4').sorttable({ helperCells: null, placeholder: 'placeholder', stop: function( event, ui ) { setTimeout(_=> document.querySelectorAll('#ex4 tr td:nth-child(2)').forEach((td,i) => td.prepend(...text[i])), 130) } }).disableSelection(); }); |
$(function() { var text = [...document.querySelectorAll('#ex4 tr td:nth-child(2)')].map(({childNodes})=> [...childNodes].slice(0,2)); $('#ex4').sorttable({ helperCells: null, placeholder: 'placeholder', stop: function( event, ui ) { setTimeout(_=> document.querySelectorAll('#ex4 tr td:nth-child(2)').forEach((td,i) => td.prepend(...text[i])), 130) } }).disableSelection(); }); |
рони,
подскажите, пожалуйста, так как у меня в таблице теперь добавились кнопки перемещения таблицы - https://javascript.ru/forum/jquery/8...k-karusel.html можно ли как то сделать что бы при перемещении теперь уже таким образом, эти подписи поясняющие также все равно были всегда в первом столбце? это моя табличка: https://pastenow.ru/9f0a0c6d37c4e5e30391dc55194ae6a8 вот тут получается перелистнул таблицу: https://pastenow.ru/99a5e174e15ff221c659423a93d7deec и естественно нету подписей к столбцам. Пробовал так сделать: /*прокрутка страницы*/ $(function() { let index = 1, max = $numBuild, length = $countBuildings + 1; const hideCells = _ => document.querySelectorAll("#ex4 tr") .forEach(({ cells }) => { [...cells].forEach(({ style }, i) => i && (style.display = i < index || i >= index + max ? "none" : "") ) }) hideCells(); $(".scroll-table").on("click", "[data-up]", function() { var text = [...document.querySelectorAll('#ex4 tr td:nth-child(2)')].map(({childNodes})=> [...childNodes].slice(-2)); setTimeout(_=> document.querySelectorAll('#ex4 tr td:nth-child(2)').forEach((td,i) => td.append(...text[i])), 130); index += +this.dataset.up; index = Math.max(1, Math.min(length - max, index)); hideCells(); }) }); Но так не получается. Может подскажите как тут быть? |
Цитата:
|
Dolf,
пробуйте... $(function() { let index = 1, max = $numBuild, length = $countBuildings + 1; const hideCells = _ => document.querySelectorAll("#ex4 tr") .forEach(({ cells }) => { [...cells].forEach(({ style }, i) => i && (style.display = i < index || i >= index + max ? "none" : "") ) }) var text = [...document.querySelectorAll('#ex4 tr td:nth-child(2)')].map(({childNodes})=> [...childNodes].slice(-2)); const textMove = index => document.querySelectorAll(`#ex4 tr td:nth-child(${++index})`).forEach((td,i) => td.append(...text[i])) hideCells(); textMove(index); $(".scroll-table").on("click", "[data-up]", function() { index += +this.dataset.up; index = Math.max(1, Math.min(length - max, index)); hideCells(); textMove(index); }) }); |
рони,
С меня пиво! :thanks: :thanks: :thanks: Вы меня очень выручили! |
Часовой пояс GMT +3, время: 07:25. |