Thêm thứ tự kéo-n-drop trong thành phần

Tôi đã phát triển một thành phần nhỏ dựa trên hướng dẫn Joomla Hello World và bây giờ tôi muốn triển khai cùng một thứ tự kéo thả mà nhiều thành phần Joomla khác bao gồm:

Bằng cách sắp xếp theo cột đầu tiên, có thể kéo từng hàng của bảng để thay đổi vị trí.

Có một cách riêng để thêm chức năng này trong Joomla hay tôi phải tự lập trình nó?

Bất kỳ nudge theo đúng hướng đánh giá cao.

Có một số điều kiện tiên quyết và bạn phải thực hiện một số sửa đổi cho mẫu xem của mình. Nhưng bạn không phải tự mình phát triển tính năng này.

Điều kiện tiên quyết

• Bạn cần một thứ tự cột kiểu INT vào bảng cơ sở dữ liệu của bạn
• Chế độ xem danh sách của bạn phải được sắp xếp (bằng cách nhấp vào tiêu đề cột của bảng)

Sửa đổi

Đây là phần quan trọng nhất để có thể sắp xếp các hàng trong bảng của bạn bằng cách kéo và thả:

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

Bạn chỉ nên kích hoạt (tức là thực hiện dòng trên) nếu bảng của bạn được sắp xếp theo thứ tự cột bảng cơ sở dữ liệu . Bạn cần tìm ra cột nào mà bảng của bạn được sắp xếp và theo hướng nào (ASC hoặc DESC). Làm điều này khi bắt đầu default.php của bạn:

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

Kiểm tra nếu bảng của bạn được sắp xếp theo thứ tự cột

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

Làm cho các hàng trong bảng của bạn được sắp xếp bằng cách kéo và thả nếu $ saveOrder là đúng. Thay thế com_example bằng tên thành phần của bạn và "items" trong task = items.saveOrderAjax bằng tên của trình điều khiển danh sách của bạn:

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

Các $ saveOrderingUrl sẽ được gọi thông qua AJAX mọi lúc bạn thả một mục. Nếu bộ điều khiển của bạn đang mở rộng lớp Joomla MVC bên phải (JControllAdmin) thì phương thức này sẽ tự động có sẵn cho bạn. itemList là ID của bảng HTML của bạn và adminForm là tên (hoặc ID, không chắc chắn) của biểu mẫu HTML của bạn:

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

Bạn sẽ cần một cột mới trong bảng HTML của bạn. Trong ảnh chụp màn hình của bạn, nó là cột xa bên trái. Tiêu đề cột bảng trông như thế này:

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

Đối với thân bảng của bạn, rất có thể bạn có một vòng lặp foreach đi qua tất cả các mục danh sách của bạn. Ô đầu tiên trong mỗi hàng của bảng HTML của bạn sẽ là biểu tượng kéo đó. Nếu bạn đã vô hiệu hóa kéo và thả (vì bảng của bạn không được sắp xếp bằng cách đặt hàng ), bạn nên tắt biểu tượng và tạo một chú giải công cụ:

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