Dodawanie kolejności przeciągania i upuszczania w komponencie


13

Opracowałem mały komponent oparty na samouczku Joomla Hello World, a teraz chciałbym zaimplementować tę samą zmianę kolejności przeciągania i upuszczania, jak wiele innych komponentów Joomla:

wprowadź opis zdjęcia tutaj

Sortując według pierwszej kolumny, można przeciągnąć każdy wiersz tabeli, aby zmienić pozycję.

Czy istnieje natywny sposób na dodanie tej funkcji w Joomla, czy też muszę ją programować samodzielnie?

Doceniamy każde poruszenie we właściwym kierunku.

Odpowiedzi:


16

Istnieją pewne warunki wstępne i trzeba wprowadzić pewne modyfikacje w szablonie widoku. Ale nie musisz samodzielnie rozwijać tej funkcji.

Wymagania wstępne

  • Potrzebujesz kolejności kolumn typu INT do tabeli bazy danych
  • Widok listy powinien być już możliwy do sortowania (klikając nagłówki kolumn tabeli)

Modyfikacje

Jest to najważniejsza część umożliwiająca sortowanie wierszy tabeli metodą przeciągania i upuszczania:

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

Powinieneś aktywować (tj. Wykonać powyższą linię) tylko wtedy, gdy twoja tabela jest posortowana według kolejności kolumn w tabeli bazy danych . Musisz dowiedzieć się, według której kolumny jest posortowana tabela i w jakim kierunku (ASC lub DESC). Zrób to na początku pliku default.php:

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

Sprawdź, czy twoja tabela jest uporządkowana według kolejności kolumn

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

Ustaw rzędy tabeli w sortowalne, przeciągając i upuszczając, jeśli $ saveOrder jest prawdziwe. Zamień com_example na nazwę komponentu i „items” w task = items.saveOrderAjax na nazwę kontrolera listy:

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

$ SaveOrderingUrl zostanie wywołana przez AJAX spędzaj go przed upadkiem element. Jeśli kontroler rozszerza odpowiednią klasę Joomla MVC (JControllerAdmin), ta metoda jest automatycznie dostępna dla Ciebie. itemList to identyfikator Twojej tabeli HTML, a adminForm to nazwa (lub identyfikator, nie jestem pewien) formularza 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>

Będziesz potrzebował nowej kolumny w tabeli HTML. Na twoim zrzucie ekranu kolumna jest bardzo po lewej stronie. Nagłówek kolumny tabeli wygląda następująco:

<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>

W przypadku korpusu tabeli najprawdopodobniej masz pętlę Foreach przechodzącą przez wszystkie elementy listy. Pierwszą komórką w każdym wierszu tabeli HTML będzie ikona przeciągania. Jeśli wyłączono przeciąganie i upuszczanie (ponieważ tabela nie jest uporządkowana przy składaniu zamówienia ), należy dezaktywować ikonę i utworzyć etykietkę:

<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>

Dziękuję, bardzo miła i obszerna odpowiedź. Właściwie to jeszcze nie udało mi się go uruchomić, ale jestem coraz bliżej :)
Bogowoe,

Jeśli masz jakieś pytania lub coś w moim przewodniku jest nieprawidłowe lub wymaga poprawy, daj mi znać.
fruppel

Mam to! Zapomniałem zmienić task=items.saveOrderAjaxna task=myviews.saveOrderAjax. Teraz działa dobrze.
Bogowoe

Sortowanie Drag'n'Drop jest połączone z narzędziami wyszukiwania. Jeśli nie masz zaimplementowanych narzędzi wyszukiwania (jak w artykułach), link sortowalny metodą przeciągnij i upuść nie działa.
Dennis Heiden,

Czegoś tu brakuje. Nie mogę przeciągać elementów tabeli, a także nie mogę sortować kolumny zamówienia.
TIIUNDER
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.