php 使用jQuery排序的Processwire排序页面

Posted 2021-05-05

<?php
if($this->config->ajax) {

			$id = $this->sanitizer->text($this->input->post->id);
			$sort = $this->sanitizer->text($this->input->post->sort);

			$next_id = $this->sanitizer->text($this->input->post->next_id);
			$next_sort = $this->sanitizer->text($this->input->post->next_sort);

			$prev_id = $this->sanitizer->text($this->input->post->prev_id);
			$prev_sort = $this->sanitizer->text($this->input->post->prev_sort);
      
      // increase next page sort by 1 + this sort
			if(!empty($next_id) && is_numeric($next_id)) {
				$new_next = $sort + 1;
				$p = $this->pages->get("id=$next_id");
				$p->of(false);
				$p->set('sort', $new_next);
				$p->save();
				$p->of(true);
			}
      
      // set this page sort
			$p = $this->pages->get("id=$id");
			$p->of(false);
			$p->set('sort', $sort);
			$p->save();
			$p->of(true);
      
      // decrease prev page sort this sort - 1
			if($prev_sort != 0 && !empty($prev_id) && is_numeric($prev_id)) {
				$new_prev = $sort - 1;
				$p = $this->pages->get("id=$prev_id");
				$p->of(false);
				$p->set('sort', $new_prev);
				$p->save();
				$p->of(true);
			}

		}
?>

<script>
 $(function() {

    $('#sortable').sortable({
        handle: '.handle',
        stop: function( event, ui ) {

            $('.my-table').css('opacity', '0.5');

            var newSort;

            var ajaxURL = '$ajaxURL';

            var id = $(ui.item).attr('id');
            var sort = $(ui.item).attr('sort');

            var nextID = $(ui.item).next().attr('id');
            var prevID = $(ui.item).prev().attr('sort');

            var nextSort = $(ui.item).next().attr('sort');
            var prevSort = $(ui.item).prev().attr('sort');
            nextSort     = parseInt(nextSort);
            prevSort     = parseInt(prevSort);

            newSort = prevSort + 1;
            if(typeof prevSort === 'undefined') {
                newSort = 1;
                nextSort = 2;
            }

            if(typeof nextSort === 'undefined' || isNaN(nextSort)) {
                newSort = prevSort + 1;
                nextSort = newSort + 1;
            }

            $.post( ajaxURL, {
                id: id,
                sort: newSort,
                next_id: nextID,
                next_sort: nextSort,
                prev_id: prevID,
                prev_sort: prevSort
            }).done(function( data ) {
                //console.log( 'Data Loaded: ' + data );
                $('.my-table').css('opacity', '1');
            });

            // console.log(nextSort);

        }
    });

    $( '#sortable' ).disableSelection();

});
</script>

<table class="my-table">
  <tbody id="sortable">
    <?php foreach($items as $item) :?>
      <tr class="ui-state-default" sort='<?= $item->sort ?>' id='<?= $item->id ?>'>
          <td class='handle'><i class="fa fa-ellipsis-v"></i></td>
          <td><?= $item->title ?></td>
      </tr>
    <?php endforeach;?>  
  </tbody>
</table>