jQueryUI сортируется для перетаскивания столбцов в адаптивной таблице - PullRequest
Новая
       65

jQueryUI сортируется для перетаскивания столбцов в адаптивной таблице

0 голосов
/ 10 февраля 2019

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

Я сделал jsfiddle , чтобы сделать некоторыетесты, и я просто не могу понять , как перетаскивать столбцы (не только th).

Я подозревал, что должен использовать опцию "connectWith" (или "items"?)и соединяю все тд, которые имеют тот же идентификатор, что и перетаскиваемый, но мне просто не удается это сделать.

Я даже не уверен, для чего на самом деле созданы «connectWith» или «элементы», но в документации нет ничего другого, что, кажется, помогает мне добиться перетаскивания столбца.

HTML: 

<html>
    <body>
        <table>
           <thead>
                <tr>
                    <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th> 
                    <th>Col 4</th>
                </tr>
           </thead>
           <tbody>
                <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                    <td>data 4</td>
                </tr>
                <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                    <td>data 4</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

CSS: 

*html, body {
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}

 body:before{
     content: "";
     display: block;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
 }

table{
    table-layout: fixed;
    margin: 0 auto;
    border-collapse: collapse;
    overflow: hidden;
    white-space: nowrap; 
    width:100%;
    color:#000;
    float:left;
}

tr{
    display:table-row;
    border: 1px solid black
}

th, td {
    border:1px solid #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: table-cell;
    text-align:center;
}

th{
    position: relative;
    background:#bbb;
}

jQuery: 

$( function() {
    $('thead tr').sortable({
        start: function(e, ui)
        {
            var ind_th= ui.item.index();
            $('tbody td:nth-child('+(ind_th+1)+')').addClass('drg').css('color','red');
        },
        connectWith:".drg",
        stop: function(e, ui)
        {
            $('tbody td').removeClass('drg')
        }
    });
});

Спасибо за помощь.

1 Ответ

0 голосов
/ 11 февраля 2019

Это не совсем красиво, но все же будет работать.

Рабочий пример: https://jsfiddle.net/Twisty/q7oyh9mj/53/

JavaScript 

$(function() {
  $('thead tr').sortable({
    containment: "parent",
    placeholder: "placeholder",
    opacity: 0.5,
    helper: "clone",
    axis: 'x',
    start: function(e, ui) {
      var ind_th = ui.item.index();
      $('tbody tr').each(function(ind, el) {
        $('td', el).eq(ind_th).addClass('drg').css('color', 'red');
      });
    },
    stop: function(e, ui) {
      var itInd = ui.item.index();
      $("tbody tr").each(function(ind, el) {
        var cell = $(".drg", el).detach();
        cell.insertBefore($("td", el).eq(itInd));
        cell.removeClass("drg").css("color", "black");
      });
    }
  });
  $('thead tr').disableSelection();
});

ВыВы также можете создать своего собственного помощника, используя function(event, element), но он не работает хорошо в stop или update.

Так что в start я добавляю класс drg, чтобы помочь идентифицироватьклетки, которые будут перемещены.После запуска stop я использую .detach(), чтобы удалить их из строк, а затем insertBefore(), чтобы поместить их обратно на новую позицию в строке на основе индекса заголовка.

Если у вас естьмного данных, я бы посоветовал посмотреть на DataTables.Я считаю, что он предлагает эту функциональность.

Обновление

Новый пример: https://jsfiddle.net/Twisty/q7oyh9mj/72/

Два незначительных изменения:

  1. Удалено containment;это препятствовало перетаскиванию заголовка за границы таблицы и не могло быть помещено в первую позицию.
  2. Добавить if, когда точка отбрасывания должна быть последним элементом

Вы также можетенастройте параметры tolerance: https://jsfiddle.net/Twisty/q7oyh9mj/73/

Ваш выбор способа управления им.

Надеюсь, это поможет.

...