컴포넌트에 드래그 앤 드롭 순서 추가

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가 true 인 경우 끌어서 놓기로 테이블 행을 정렬 가능하게 만드십시오. com_example을 구성 요소 이름으로 바꾸고 task = items.saveOrderAjax의 "items"를 목록 컨트롤러 이름으로 바꾸십시오.

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 는 HTML 테이블의 ID이고 adminForm 은 HTML 양식의 이름 (또는 확실하지 않은 ID)입니다.

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