Adicionando a ordem de arrastar e soltar no componente

Eu desenvolvi um pequeno componente baseado no tutorial Joomla Hello World e agora gostaria de implementar a mesma reordenação de arrastar e soltar que muitos outros componentes do Joomla incluem:

Classificando pela primeira coluna, é possível arrastar cada linha da tabela para alterar a posição.

Existe uma maneira nativa de adicionar essa funcionalidade no Joomla, ou eu tenho que programá-lo eu mesmo?

Qualquer cutucada na direção certa é apreciada.

Existem alguns pré-requisitos e você precisa fazer algumas modificações no seu modelo de exibição. Mas você não precisa desenvolver esse recurso sozinho.

Pré-requisitos

• Você precisa de uma ordem de coluna do tipo INT para sua tabela de banco de dados
• Sua exibição de lista já deve ser classificada (clicando nos cabeçalhos das colunas da tabela)

Modificações

Esta é a parte mais importante para tornar as linhas da sua tabela classificáveis, arrastando e soltando:

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

Você só deve ativar (ou seja, executar a linha acima) se sua tabela for classificada pela ordem da coluna da tabela do banco de dados . Você precisa descobrir por qual coluna sua tabela está classificada e em qual direção (ASC ou DESC). Faça isso no início do seu default.php:

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

Verifique se sua tabela está ordenada por ordem de coluna

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

Torne as linhas da tabela classificáveis, arrastando e soltando se $ saveOrder for true. Substitua com_example pelo nome do componente e "itens" em task = items.saveOrderAjax pelo nome do seu controlador de lista:

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

O $ saveOrderingUrl será chamado via AJAX toda vez que você soltar um item. Se o seu controlador estiver estendendo a classe Joomla MVC correta (JControllerAdmin), esse método estará automaticamente disponível para você. itemList é o ID da sua tabela HTML e adminForm é o nome (ou ID, não tenho certeza) do seu formulário 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>

Você precisará de uma nova coluna na sua tabela HTML. Na sua captura de tela, é a coluna à esquerda. O cabeçalho da coluna da tabela fica assim:

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

Para o corpo da sua mesa, você provavelmente tem um loop foreach passando por todos os itens da sua lista. A primeira célula em cada linha da sua tabela HTML será esse ícone de arrastar. Se você tiver desativado o recurso de arrastar e soltar (porque sua tabela não é solicitada por pedido ), desative o ícone e faça uma dica de ferramenta:

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