Menambahkan urutan drag-n-drop pada komponen


13

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:

masukkan deskripsi gambar di sini

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.

Jawaban:


16

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>

Terima kasih, jawaban yang sangat bagus dan luas. Saya belum benar-benar berhasil membuatnya bekerja, tapi saya semakin dekat :)
Bogowoe

Jika Anda memiliki pertanyaan atau apakah ada sesuatu dalam panduan saya yang salah atau perlu diperbaiki, beri tahu saya.
fruppel

Saya mendapatkannya! Saya lupa ganti task=items.saveOrderAjaxke task=myviews.saveOrderAjax. Sekarang berfungsi dengan baik.
Bogowoe

Penyortiran Drag'n'Drop dikaitkan dengan tooltools. Jika Anda belum menerapkan tooltools (seperti dalam artikel) tautan sorting dengan drag'n'drop tidak berfungsi.
Dennis Heiden

Ada yang hilang di sini. Saya tidak bisa menarik item tabel dan juga tidak bisa mengurutkan kolom pemesanan.
TIIUNDER
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.