Додавання впорядкування перетягування вниз-компонента


13

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

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

Сортувавши за першим стовпцем, можна перетягувати кожен рядок таблиці, щоб змінити позицію.

Чи є власний спосіб додати цю функціональність в Joomla, або я повинен сам її запрограмувати?

Будь-який поштовх у правильному напрямку оцінив.

Відповіді:


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 вірно. Замініть 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 - це ім'я (або ідентифікатор, не впевнений) вашої 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>

Для корпусу вашого столу ви, швидше за все, маєте цикл передбачення, який проходить через усі елементи списку. Першою коміркою у кожному рядку таблиці 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>

Дякую, дуже приємна та обширна відповідь. Мені ще не вдалося змусити його працювати, але я наближаюся :)
Bogowoe

Якщо у вас є якісь запитання або якщо щось у моєму посібнику, це неправильно або потребує вдосконалення, будь ласка, дайте мені знати.
fruppel

Зрозумів! Я забув змінити task=items.saveOrderAjaxдо task=myviews.saveOrderAjax. Зараз це працює чудово.
Богоуе

Сортування Drag'n'Drop пов'язане з пошуковими інструментами. Якщо ви не виконали пошукові інструменти (як у статтях), сортування за посиланням drag'n'drop не працює.
Денніс Хайден

Щось тут не вистачає. Я не можу перетягувати елементи таблиці, а також не можу сортувати стовпчик замовлення.
TIIUNDER
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.