it-swarm-es.com

Agregar orden de arrastrar y soltar en el componente

Desarrollé un pequeño componente basado en el tutorial de Joomla Hello World, y ahora me gustaría implementar el mismo reordenamiento de arrastrar y soltar que muchos otros componentes de Joomla incluyen:

enter image description here

Al ordenar por la primera columna, es posible arrastrar cada fila de la tabla para cambiar la posición.

¿Existe una forma nativa de agregar esta funcionalidad en Joomla, o tengo que programarla yo mismo?

Cualquier empujón en la dirección correcta apreciado.

13
Bogowoe

Hay algunos requisitos previos y debe realizar algunas modificaciones en su plantilla de vista. Pero no tiene que desarrollar esta función por su cuenta.

Prerrequisitos

  • Necesita una columna ordenando de tipo INT a su tabla de base de datos
  • Su vista de lista ya debe poder ordenarse (haciendo clic en los encabezados de columna de la tabla)

Modificaciones

Esta es la parte más importante para hacer que las filas de su tabla se puedan ordenar arrastrando y soltando:

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

Solo debe activar (es decir, ejecutar la línea anterior) si su tabla está ordenada por el orden de la columna de la tabla de la base de datos . Debe averiguar por qué columna está ordenada su tabla y en qué dirección (ASC o DESC). Haga esto al comienzo de su default.php:

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

Compruebe si su tabla está ordenada por columna ordenando

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

Haga que las filas de su tabla se puedan ordenar arrastrando y soltando si $ saveOrder es verdadero. Reemplace com_example con el nombre de su componente y "elementos" en task = items.saveOrderAjax con el nombre de su controlador de lista:

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

El $ saveOrderingUrl se llamará a través de AJAX cada vez que suelte un elemento. Si su controlador está extendiendo la clase correcta de Joomla MVC (JControllerAdmin), este método está automáticamente disponible para usted . itemList es el ID de su tabla HTML, y adminForm es el nombre (o ID, no estoy seguro) de su formulario 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>

Necesitará una nueva columna en su tabla HTML. En su captura de pantalla es la columna a la izquierda. El encabezado de la columna de la tabla se ve así:

<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 el cuerpo de su mesa, lo más probable es que tenga un bucle foreach pasando por todos los elementos de su lista. La primera celda en cada fila de su tabla HTML será ese ícono de arrastre. Si tiene la función de arrastrar y soltar deshabilitada (debido a que su tabla no está ordenada por ordenando ), debe desactivar el icono y hacer una sugerencia:

<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