การเพิ่มลำดับการลากและวางในส่วนประกอบ

ฉันได้พัฒนาส่วนประกอบเล็ก ๆ ตามแบบฝึกหัด Joomla Hello World และตอนนี้ฉันต้องการใช้การเรียงลำดับการลากและวางแบบเดิมที่ส่วนประกอบ Joomla อื่น ๆ รวมถึง:

ด้วยการเรียงลำดับตามคอลัมน์แรกคุณสามารถลากแต่ละแถวของตารางเพื่อเปลี่ยนตำแหน่งได้

มีวิธีดั้งเดิมในการเพิ่มฟังก์ชั่นนี้ใน Joomla หรือฉันต้องตั้งโปรแกรมด้วยตัวเอง?

เขยิบไปในทิศทางที่ถูกต้องชื่นชม

มีข้อกำหนดเบื้องต้นบางอย่างและคุณต้องทำการแก้ไขแม่แบบมุมมองของคุณ แต่คุณไม่จำเป็นต้องพัฒนาฟีเจอร์นี้ด้วยตัวเอง

ข้อกำหนดเบื้องต้น

• คุณต้องมีการเรียงลำดับคอลัมน์ชนิด INT ไปยังตารางฐานข้อมูลของคุณ
• มุมมองรายการของคุณควรจะสามารถจัดเรียงได้ (โดยคลิกที่ส่วนหัวของคอลัมน์ตาราง)

การปรับเปลี่ยน

นี่เป็นส่วนที่สำคัญที่สุดในการทำให้แถวของตารางเรียงได้โดยการลากและวาง:

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

คุณควรเปิดใช้งาน (เช่นรันบรรทัดข้างต้น) ถ้าตารางของคุณจะถูกจัดเรียงตามคอลัมน์ตารางฐานข้อมูลการสั่งซื้อ คุณต้องค้นหาว่าคอลัมน์ใดที่ตารางของคุณเรียงลำดับและทิศทางใด (ASC หรือ DESC) ทำสิ่งนี้ที่จุดเริ่มต้นของ default.php ของคุณ:

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

ตรวจสอบว่าตารางของคุณถูกเรียงลำดับตามการสั่งซื้อคอลัมน์หรือไม่

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

ทำให้แถวตารางของคุณเรียงลำดับได้ด้วยการลากและวางถ้า $ saveOrder เป็นจริง แทนที่ com_example ด้วยชื่อคอมโพเนนต์ของคุณและ "items" ใน task = items.saveOrderAjax ด้วยชื่อของตัวควบคุมรายการของคุณ:

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

$ saveOrderingUrlจะถูกเรียกว่าผ่าน AJAX ทุกครั้งที่คุณวางรายการ หากคอนโทรลเลอร์ของคุณขยายคลาส Joomla MVC ที่ถูกต้อง (JControllerAdmin) วิธีนี้จะใช้ได้โดยอัตโนมัติสำหรับคุณ itemListคือ ID ของตาราง HTML ของคุณและadminFormเป็นชื่อ (หรือ ID ไม่แน่ใจ) ของฟอร์ม 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>

คุณจะต้องมีคอลัมน์ใหม่ในตาราง HTML ของคุณ ในภาพหน้าจอของคุณเป็นคอลัมน์ทางด้านซ้ายสุด ส่วนหัวของคอลัมน์ตารางมีลักษณะดังนี้:

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

สำหรับเนื้อหาตารางของคุณคุณมักจะมีวง foreach ผ่านรายการทั้งหมดของคุณ เซลล์แรกในแต่ละแถวของตาราง HTML ของคุณจะเป็นไอคอนลากนั้น หากคุณมีการลากและวางปิดการใช้งาน (เพราะตารางของคุณไม่ได้สั่งโดยการสั่งซื้อ ) คุณควรปิดไอคอนและทำเคล็ดลับเครื่องมือ:

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