Ajout d'un ordre de glisser-déposer dans le composant

J'ai développé un petit composant basé sur le tutoriel Joomla Hello World, et maintenant je voudrais implémenter le même réarrangement par glisser-déposer que de nombreux autres composants Joomla incluent:

En triant par la première colonne, il est possible de faire glisser chaque ligne du tableau afin de changer la position.

Existe-t-il une façon native d'ajouter cette fonctionnalité dans Joomla, ou dois-je la programmer moi-même?

Tout coup de pouce dans la bonne direction est apprécié.

Il existe certaines conditions préalables et vous devez apporter des modifications à votre modèle de vue. Mais vous n'avez pas à développer cette fonctionnalité vous-même.

Conditions préalables

• Vous avez besoin d'un ordre des colonnes de type INT dans votre table de base de données
• La vue de votre liste doit déjà être triable (en cliquant sur les en-têtes de colonne du tableau)

Modifications

C'est la partie la plus importante pour rendre vos lignes de tableau triables par glisser-déposer:

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

Vous ne devez activer (c'est-à-dire exécuter la ligne ci-dessus) que si votre table est triée selon l' ordre des colonnes de la table de base de données . Vous devez savoir par quelle colonne votre tableau est trié et dans quelle direction (ASC ou DESC). Faites cela au début de votre default.php:

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

Vérifiez si votre table est ordonnée par colonne commande

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

Rendez vos lignes de tableau triables par glisser-déposer si $ saveOrder est vrai. Remplacez com_example par le nom de votre composant et "items" dans task = items.saveOrderAjax par le nom de votre contrôleur de liste:

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

Le saveOrderingUrl $ sera appelé via AJAX chaque fois que vous déposez un élément. Si votre contrôleur étend la bonne classe Joomla MVC (JControllerAdmin), cette méthode est automatiquement disponible pour vous. itemList est l'ID de votre table HTML et adminForm est le nom (ou l'ID, pas sûr) de votre formulaire 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>

Vous aurez besoin d'une nouvelle colonne dans votre tableau HTML. Dans votre capture d'écran, c'est la colonne la plus à gauche. L'en-tête de colonne du tableau ressemble à ceci:

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

Pour votre corps de table, vous avez très probablement une boucle foreach passant par tous vos éléments de liste. La première cellule de chaque ligne de votre tableau HTML sera cette icône de glisser. Si vous avez désactivé le glisser-déposer (car votre table n'est pas commandée par commande ), vous devez désactiver l'icône et créer une info-bulle:

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