web-dev-qa-db-fra.com

Ajout du tri par glisser-déposer dans le composant

J'ai développé un petit composant basé sur le didacticiel Joomla Hello World et j'aimerais maintenant implémenter le même processus de réorganisation glisser-déposer que de nombreux autres composants Joomla, notamment:

enter image description here

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 un moyen natif d’ajouter cette fonctionnalité à Joomla ou dois-je la programmer moi-même?

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

joomla-3.xcomponentdevelopment
13
Bogowoe

Il existe certaines conditions préalables et vous devez apporter quelques modifications à votre modèle de vue. Mais vous ne devez pas développer cette fonctionnalité tout seul.

Conditions préalables

  • Vous avez besoin d'une colonne qui commande de type INT dans votre table de base de données.
  • Votre vue liste devrait déjà être triable (en cliquant sur les en-têtes de colonnes du tableau)

Modifications

C’est la partie la plus importante pour rendre vos lignes de table 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 par la colonne de la base de données en ordre . Vous devez savoir dans quelle colonne votre table est triée et dans quelle direction (ASC ou DESC). Faites ceci 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 classée par colonne en ordre 

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

Rendez vos lignes de table 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 supprimez un élément. Si votre contrôleur étend la classe Joomla MVC appropriée (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 de la table 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 probablement une boucle foreach parcourant tous les éléments de votre liste. La première cellule de chaque ligne de votre tableau HTML sera cette icône glisser. Si vous avez désactivé le glisser-déposer (car votre table n'est pas classée par en ordre ), 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>
16
fruppel