it-swarm.it

Aggiunta dell'ordinamento di trascinamento della selezione 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:

enter image description here

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?

È stato apprezzato qualsiasi spostamento nella giusta direzione.

13
Bogowoe

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

Prerequisiti

  • È necessaria una colonna che ordina 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 alla colonna della tabella del database ordinamento . 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 la tabella è ordinata per colonna ordinamento

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

Rendi ordinabili le righe della tua tabella trascinandole se $ saveOrder è vero. 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);
}

$ saveOrderingUrl verrà chiamato via AJAX ogni volta che si rilascia un elemento. Se il controller estende la giusta classe MVC Joomla (JControllerAdmin) questo metodo è automaticamente disponibile per te . itemList è l'ID della tua tabella HTML e adminForm è il nome (o ID, non sicuro) del tuo 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>

Per il corpo del tuo tavolo, molto probabilmente hai un ciclo foreach che attraversa 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 (poiché la tabella non è ordinata dall'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>
16
fruppel