Hinzufügen der Drag-and-Drop-Reihenfolge in der Komponente

Ich habe eine kleine Komponente entwickelt, die auf dem Joomla Hello World-Tutorial basiert, und möchte nun die gleiche Drag-and-Drop-Neuordnung implementieren, die viele andere Joomla-Komponenten enthalten:

Durch Sortieren nach der ersten Spalte ist es möglich, jede Tabellenzeile zu ziehen, um die Position zu ändern.

Gibt es eine native Möglichkeit, diese Funktionalität in Joomla hinzuzufügen, oder muss ich sie selbst programmieren?

Jeder Anstoß in die richtige Richtung ist willkommen.

Es gibt einige Voraussetzungen und Sie müssen einige Änderungen an Ihrer Ansichtsvorlage vornehmen. Sie müssen diese Funktion jedoch nicht alleine entwickeln.

Voraussetzungen

• Sie müssen eine Spalte Bestellung vom Typ INT zu Ihrer Datenbanktabelle
• Ihre Listenansicht sollte bereits sortierbar sein (durch Klicken auf die Spaltenüberschriften der Tabelle)

Änderungen

Dies ist der wichtigste Teil, um Ihre Tabellenzeilen per Drag & Drop sortierbar zu machen:

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

Sie sollten nur dann aktivieren (dh die obige Zeile ausführen) , wenn Ihre Tabelle durch den Datenbanktabellenspalte sortiert Ordnung . Sie müssen herausfinden, nach welcher Spalte Ihre Tabelle sortiert ist und in welche Richtung (ASC oder DESC). Mach das am Anfang deiner default.php:

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

Überprüfen Sie anhand der Spaltenreihenfolge , ob Ihre Tabelle sortiert ist

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

Machen Sie Ihre Tabellenzeilen per Drag & Drop sortierbar, wenn $ saveOrder true ist. Ersetzen Sie com_example durch Ihren Komponentennamen und "items" in task = items.saveOrderAjax durch den Namen Ihres Listencontrollers:

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

Die $ saveOrderingUrl wird jedes Mal über AJAX aufgerufen, wenn Sie einen Artikel ablegen. Wenn Ihr Controller die richtige Joomla MVC-Klasse (JControllerAdmin) erweitert, ist diese Methode automatisch für Sie verfügbar. itemList ist die ID Ihrer HTML-Tabelle und adminForm ist der Name (oder die ID, nicht sicher) Ihres HTML-Formulars:

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

Sie benötigen eine neue Spalte in Ihrer HTML-Tabelle. In deinem Screenshot ist es die Spalte ganz links. Die Kopfzeile der Tabellenspalte sieht folgendermaßen aus:

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

Für Ihren Tabellenkörper haben Sie höchstwahrscheinlich eine foreach-Schleife, die alle Ihre Listenelemente durchläuft. Die erste Zelle in jeder Zeile Ihrer HTML-Tabelle ist das Ziehsymbol. Wenn Sie Drag & Drop deaktiviert haben (weil Ihr Tisch nicht per Bestellung bestellt wurde ), sollten Sie das Symbol deaktivieren und einen Tooltip erstellen:

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