Как изменить порядок загруженных файлов - vorst.ru

Сортировка


Сортировка строк мышкой

Одна из задач возникающих при разработке сайта это загрузка изображений для слайдера. Иногда для заказчика сайта важно менять порядок следования загруженных слайдов. Хорошо, когда можно изменить порядок слайдов простым перетаскиванием.

Сортировка

Сортировка строк мышкой

Василий оставил комментарий в конце января

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

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

На тот момент этой функциональности не было. Собирался я долго. Но вот, наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).


Пусть таблица, это список строк загруженных файлов. Каждая строчка в таблице имеет ID.

В начале перетаскивания (кнопка мыши только нажата) необходимо считать по порядку ID всех строк. Когда перетаскивание закончилось (кнопка отпущена), нужно опять собрать по порядку ID всех строк.

Если порядок идентичный - перемещение строк не состоялось. Иначе нужно зафиксировать новый порядок строк.

Таков нехитрый алгоритм. Реализация с помощью jquery ui тоже не сложная.

$( function() {
  var before, after;
  function getRowsIds() {
    // get rows by .table selector
    var rows = $('#files-div .table li'), a = []; i = 0;
    $.each(rows, function(index, row) {
      // id is "row-123"
      a[i++] = row.id.substr(4);
    });
    return JSON.stringify(a);
  }
  $( "#sortable" ).sortable({
    revert: true,
    start: function( event, ui ) {before = getRowsIds()},
    update: function( event, ui ) {
      after = getRowsIds();
      if(before != after) {
        // save new order
        $.ajax({
          method: "POST",
          url: "controller/swap",
          data: {ids: after},
          success: function(id, status, xhr) {}
        });
      }
    }
  });
  $( "#draggable" ).draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
  });
  $( "ul, li" ).disableSelection();
} );

Осталось определить в контроллере действие, записывающее новый порядок по ajax-запросу.

В расширении yii2-byone-uploader информация обо всех загруженных файлах хранится в одной таблице OneFile. Поэтому действие очень короткое.

public function actionSwap()
{
  if(Yii::$app->request->isAjax)
  {
    $ids = json_decode(Yii::$app->request->post('ids'));
    $time = time(); $j = 0;
    for($i = 0; $i < count($ids); $i++) {
      $model = OneFile::findOne($ids[$i]);
      // rows will be sorted by time
      $model->created_at = $time + $i;
      if($model->save()) $j++;
    }
    echo $j;
  }
}

Сортировка строк будет выполняться по полю created_at. Соответственно, при выборе всех файлов, принадлежащих модели, нужно добавить сортировку. Например для модели Post.

public function getFiles()
{
  return $this->hasMany(OneFile::className(), ['parent_id' => 'id'])
    ->where('model=:model', [':model' => 'common\models\Post'])
    ->orderBy('created_at');
}

Новый порядок строк сохраняется при каждом перетаскивании. Значит меняются местами только две строки и ID остальных строк можно не передавать на сервер. Как? Вы можете посмотреть на gitHub.

Заключение

Собственно это только анонс нового свойства модуля загрузки фото и вообще файлов. Возможность сортировать строки перетаскиванием по умолчанию отключена. Так что не забудьте установить флаг draggable при вызове виджета.

Оставьте комментарий

Только авторизованные посетители могут оставлять комментарии. Пожалуйста, войдите или пройдите регистрацию.