Menambahkan urutan drag-n-drop pada komponen

Saya telah mengembangkan komponen kecil berdasarkan tutorial Joomla Hello World, dan sekarang saya ingin menerapkan penataan ulang drag-n-drop yang sama dengan yang banyak komponen Joomla lainnya meliputi:

Dengan mengurutkan berdasarkan kolom pertama, mungkin untuk menyeret setiap baris tabel untuk mengubah posisi.

Apakah ada cara asli untuk menambahkan fungsi ini di Joomla, atau apakah saya harus memprogramnya sendiri?

Setiap dorongan ke arah yang benar dihargai.

Ada beberapa prasyarat dan Anda harus melakukan beberapa modifikasi pada template tampilan Anda. Tetapi Anda tidak harus mengembangkan fitur ini sendirian.

Prasyarat

• Anda memerlukan pemesanan kolom tipe INT ke tabel database Anda
• Tampilan daftar Anda harus sudah dapat disortir (dengan mengklik tajuk kolom tabel)

Modifikasi

Ini adalah bagian paling penting untuk membuat baris tabel Anda dapat disortir dengan drag dan drop:

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

Anda hanya harus mengaktifkan (mis. Jalankan baris di atas) jika tabel Anda diurutkan berdasarkan urutan kolom tabel database . Anda perlu mengetahui kolom mana yang diurutkan tabel Anda dan ke arah mana (ASC atau DESC). Lakukan ini di awal default.php Anda:

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

Periksa apakah meja Anda dipesan berdasarkan pemesanan kolom

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

Buat baris tabel Anda dapat disortir dengan drag and drop jika $ saveOrder benar. Ganti com_example dengan nama komponen Anda dan "item" di task = items.saveOrderAjax dengan nama pengontrol daftar Anda:

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

The $ saveOrderingUrl akan dipanggil melalui AJAX setiap kali Anda drop item. Jika controller Anda memperluas kelas Joomla MVC yang tepat (JControllerAdmin) metode ini tersedia secara otomatis untuk Anda. itemList adalah ID dari tabel HTML Anda, dan adminForm adalah nama (atau ID, tidak yakin) dari bentuk HTML Anda:

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

Anda akan membutuhkan kolom baru di tabel HTML Anda. Di tangkapan layar Anda, itu adalah kolom paling kiri. Header kolom tabel terlihat seperti ini:

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

Untuk badan tabel Anda, Anda kemungkinan besar memiliki loop foreach melalui semua item daftar Anda. Sel pertama di setiap baris tabel HTML Anda adalah ikon seret itu. Jika drag and drop Anda dinonaktifkan (karena meja Anda tidak dipesan dengan memesan ), Anda harus menonaktifkan ikon dan membuat tooltip:

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