Добавление порядка перетаскивания в компоненте

13

Я разработал небольшой компонент на основе учебного пособия по Joomla Hello World, и теперь я хотел бы реализовать такое же изменение порядка перетаскивания, как и многие другие компоненты Joomla:

введите описание изображения здесь

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

Есть ли собственный способ добавить эту функциональность в Joomla, или я должен программировать это сам?

Любое толчок в правильном направлении приветствуется.

Bogowoe
источник

Ответы:

16

Существуют некоторые предварительные условия, и вы должны внести некоторые изменения в шаблон представления. Но вам не нужно разрабатывать эту функцию самостоятельно.

Предпосылки

  • Вам нужен порядок столбцов типа INT в вашей таблице базы данных
  • Ваше представление списка должно быть уже отсортировано (нажав на заголовки столбцов таблицы)

изменения

Это самая важная часть, позволяющая сделать строки таблицы сортируемыми путем перетаскивания:

JHtml::_('sortablelist.sortable', 'itemList', 'adminForm', strtolower($listDirn), $saveOrderingUrl);

Вы должны активировать (т.е. выполнить приведенную выше строку), только если ваша таблица отсортирована по порядку столбцов таблицы базы данных . Вам необходимо выяснить, по какому столбцу сортируется ваша таблица и в каком направлении (ASC или DESC). Сделайте это в начале вашего default.php:

$listOrder = $this->escape($this->state->get('list.ordering'));
$listDirn  = $this->escape($this->state->get('list.direction'));

Проверьте , если ваш стол заказан на колонке заказа

$saveOrder = $listOrder == 'a.ordering';

Сделайте ваши строки таблицы сортируемыми путем перетаскивания, если $ saveOrder имеет значение true. Замените com_example именем вашего компонента, а "items" в task = items.saveOrderAjax на имя вашего контроллера списка:

if ($saveOrder)
{
    $saveOrderingUrl = 'index.php?option=com_example&task=items.saveOrderAjax&tmpl=component';
    JHtml::_('sortablelist.sortable', 'itemList', 'adminForm', strtolower($listDirn), $saveOrderingUrl);
}

$ SaveOrderingUrl будет вызываться через AJAX каждый раз упаду элемент. Если ваш контроллер расширяет правильный класс Joomla MVC (JControllerAdmin), этот метод автоматически доступен для вас. itemList - это идентификатор вашей HTML-таблицы, а adminForm - это имя (или ID, не уверен) вашей HTML-формы:

<form action="<?php echo JRoute::_('index.php?option=com_example&view=items'); ?>" method="post" name="adminForm" id="adminForm">
    ...
    <table class="table table-striped" id="itemList">
        ...
    </table>
    ...
</form>

Вам понадобится новый столбец в вашей таблице HTML. На вашем скриншоте это столбец слева. Заголовок столбца таблицы выглядит так:

<th width="1%" class="nowrap center hidden-phone">
    <?php echo JHtml::_('searchtools.sort', '', 'a.ordering', $listDirn, $listOrder, null, 'asc', 'JGRID_HEADING_ORDERING', 'icon-menu-2'); ?>
</th>

Для вашего тела таблицы у вас, скорее всего, есть цикл foreach, проходящий через все элементы списка. Эта ячейка перетаскивания будет первой ячейкой в ​​каждой строке вашей HTML-таблицы. Если у вас отключено перетаскивание (поскольку ваша таблица не упорядочена по порядку ), вы должны отключить значок и создать всплывающую подсказку:

<tbody>
    <?php foreach ($this->items as $i => $item) :
        $ordering  = ($listOrder == 'ordering');
    ?>
    <tr class="row<?php echo $i % 2; ?>">
        <td class="order nowrap center hidden-phone">
        <?php
            $iconClass = '';
            if (!$saveOrder) {
                $iconClass = ' inactive tip-top hasTooltip" title="' . JHtml::tooltipText('JORDERINGDISABLED');
            }
         ?>
             <span class="sortable-handler <?php echo $iconClass ?>">
                 <span class="icon-menu"></span>
             </span>
             <?php if ($saveOrder) : ?>
             <input type="text" style="display:none" name="order[]" size="5" value="<?php echo $item->ordering; ?>" class="width-20 text-area-order " />
             <?php endif; ?>
        </td>
  ...
</tbody>
fruppel
источник
Спасибо, очень хороший и обширный ответ. Мне еще не удалось заставить его работать, но я все ближе :)
Bogowoe
Если у вас есть какие-либо вопросы или если в моем руководстве есть что-то неправильное или нуждается в улучшении, пожалуйста, дайте мне знать.
Frupel
Я понял! Я забыл изменить task=items.saveOrderAjaxна task=myviews.saveOrderAjax. Теперь работает нормально.
Bogowoe
Сортировка Drag'n'Drop связана с инструментами поиска. Если у вас не реализованы поисковые инструменты (как в статьях), ссылка сортировки по drag'n'drop не работает.
Деннис Хайден
Здесь чего-то не хватает. Я не могу перетащить элементы таблицы, а также не могу отсортировать столбец заказа.
TIIUNDER