Aggiunta dell'ordinamento drag-and-drop nel componente

Ho sviluppato un piccolo componente basato sul tutorial di Joomla Hello World e ora vorrei implementare lo stesso riordino drag-and-drop che molti altri componenti di Joomla includono:

Ordinando per la prima colonna, è possibile trascinare ogni riga della tabella per cambiare la posizione.

Esiste un modo nativo per aggiungere questa funzionalità in Joomla o devo programmarlo da solo?

È stata apprezzata qualsiasi spinta nella giusta direzione.

Esistono alcuni prerequisiti e devi apportare alcune modifiche al tuo modello di visualizzazione. Ma non devi sviluppare questa funzione da solo.

Prerequisiti

• È necessario un ordinamento di colonna di tipo INT nella tabella del database
• La visualizzazione dell'elenco dovrebbe già essere ordinabile (facendo clic sulle intestazioni delle colonne della tabella)

modifiche

Questa è la parte più importante per rendere ordinabili le righe della tabella trascinandole:

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

È necessario attivare (ovvero eseguire la riga precedente) se la tabella è ordinata in base all'ordinamento delle colonne della tabella del database . Devi scoprire in base a quale colonna è ordinata la tabella e in quale direzione (ASC o DESC). Fallo all'inizio del tuo default.php:

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

Controlla se il tuo tavolo è ordinato per colonna ordinamento

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

Rendi ordinabili le righe della tabella trascinandole se $ saveOrder è true. Sostituisci com_example con il nome del tuo componente e "items" in task = items.saveOrderAjax con il nome del tuo controller elenco:

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

Il $ saveOrderingUrl sarà chiamato tramite la tecnologia AJAX ogni volta che si lascia cadere un oggetto. Se il tuo controller estende la giusta classe MVC Joomla (JControllerAdmin) questo metodo è automaticamente disponibile per te. itemList è l'ID della tabella HTML e adminForm è il nome (o ID, non sono sicuro) del modulo 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>

Avrai bisogno di una nuova colonna nella tua tabella HTML. Nel tuo screenshot è la colonna all'estrema sinistra. L'intestazione della colonna della tabella è simile alla seguente:

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

Molto probabilmente per il corpo della tabella è presente un ciclo foreach che passa attraverso tutti gli elementi dell'elenco. La prima cella in ogni riga della tabella HTML sarà quella icona di trascinamento. Se il trascinamento della selezione è disabilitato (perché la tabella non è ordinata per ordine ), è necessario disattivare l'icona e creare una descrizione comandi:

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