Změna pořadí přetažením – AJAX třídění

Často je zapotřebí umožnit uživatelům intuitivním rychlým způsobem měnit pořadí obrázků, produktů, resp. jakýchkoliv datových položek. Řešením je třídění přetažením myší. Nejjednodušší způsob, jak vizuální třídění zajistit, je využít jQuery UI a data zasílat jQuery metodou post().

Z následující ukázky je patrné, že při přetažení boxu dojde k update a následně je volána funkce post(). Nezbytná je serializace, jejímž výstupem je pole pages zpracované (po předání skriptu ajax-sort.php) funkcí parse_str(). Posledním krokem je zpracování předaných dat, nejlépe cyklem foreach a uložením do databáze.

ajax-sort.php

  if( $_POST['pages'] ) {
    parse_str($_POST['pages'], $itemOrder);
    foreach ($itemOrder['page'] as $key => $value) {
        $dtz = mysqli_query( $conn, "UPDATE erp_checklist SET priorita = $key WHERE id = $value " );
    }
  }

if( $_POST['pages'] ) {

parse_str($_POST['pages'], $itemOrder);

foreach ($itemOrder['page'] as $key => $value) {

$dtz = mysqli_query( $conn, "UPDATE erp_checklist SET priorita = $key WHERE id = $value " );

}

index.php

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
   <style>
      .datablock {
          padding: 15px; border: 1px solid green;
      }
      ul {
          list-style-type: none;
      }
   </style>
   <script>
		$(document).ready(function(){
			$("#list_of_tasks").sortable({
				update: function(event, ui) {
					$.post("ajax_sort.php", { type: "orderPages", pages: $('#list_of_tasks').sortable('serialize') } );
				}
			});
		});
	</script>
   
</head>
<body> 

<ul id="list_of_tasks" class="ui-sortable"> 
  <li id="page_1"> <div class="datablock"> Datablock 1 </div></li> 
  <li id="page_2"> <div class="datablock"> Datablock 2 </div></li> 
</ul> 

</body> 
</html>

<html>

<head>

<style>

.datablock {

padding: 15px; border: 1px solid green;

}

ul {

list-style-type: none;

}

</style>

$(document).ready(function(){

$("#list_of_tasks").sortable({

update: function(event, ui) {

$.post("ajax_sort.php", { type: "orderPages", pages: $('#list_of_tasks').sortable('serialize') } );

}

});

</script>

</head>

<body>

<li id="page_1"> <div class="datablock"> Datablock 1 </div></li>

<li id="page_2"> <div class="datablock"> Datablock 2 </div></li>

</ul>

</body>

</html>

Při použití výše uvedeného postupu je nutné dávat pozor na selektor: $(„#list_of_tasks) … id=“list_of_tasks“.
Identifikátory můžete vložit do <li> např. takto: page_<?php echo $id ?>.

Avšak pozor! Pokud chcete měnit pořadí vyšších desítek, stovek nebo tisíců záznamů, doporučuji skripty trochu vylepšit a sice tak,
aby se neprováděly stovky nebo dokonce tisíce volání databáze, ale pouze jedno zavolání, i když bude trochu složitější.
Databázi byste jinak velmi snadno přetížili, což by výrazně zpomalilo načítání stránek.

ajax-sort.php (verze 2)

<?php

if( $_POST['pages'] ) {

    parse_str($_POST['pages'], $itemOrder);

    // Řádky v tabulce produkty vybíráme pomocí IN() 
    // CASE použijeme pro nastavení nové hodnoty poradi
    /*
    UPDATE produkty SET poradi =
      CASE id
        WHEN 20 THEN 1
        WHEN 30 THEN 2
        WHEN 5 THEN 3
      END CASE
    WHERE id IN (20, 30, 5)
    */
        
    $nove_poradi = $itemOrder['page'];
    
    $query = "UPDATE produkty SET poradi = (CASE id ";
    foreach($nove_poradi as $key => $value) {
      $query .= " WHEN {$value} THEN {$key}";
    }
    $query .= " END CASE) WHERE id IN (" . implode(",", $nove_poradi) . ")";
    
    echo $query;
  
}

<?php

if( $_POST['pages'] ) {

parse_str($_POST['pages'], $itemOrder);

// Řádky v tabulce produkty vybíráme pomocí IN()

// CASE použijeme pro nastavení nové hodnoty poradi

UPDATE produkty SET poradi =

CASE id

WHEN 20 THEN 1

WHEN 30 THEN 2

WHEN 5 THEN 3

END CASE

WHERE id IN (20, 30, 5)

$nove_poradi = $itemOrder['page'];

$query = "UPDATE produkty SET poradi = (CASE id ";

foreach($nove_poradi as $key => $value) {

$query .= " WHEN {$value} THEN {$key}";

}

$query .= " END CASE) WHERE id IN (" . implode(",", $nove_poradi) . ")";

echo $query;

}

Abychom mohli sledovat co skript dělá, je dobré přidat pár řádků i do volajícího skriptu:

index.php (verze 2)

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
   <style>
      .datablock {
          padding: 15px; border: 1px solid green;
      }
      ul {
          list-style-type: none;
      }
   </style>
   <script>
		$(document).ready(function(){
			$("#list_of_tasks").sortable({
   update: function(event, ui) {
   $.post("ajax_sort.php", { type: "orderPages", pages: $('#list_of_tasks').sortable('serialize') }, function(response) {
   console.log("Response: "+response);
   });
 }
			});
		});
	</script>
   
</head>
<body> 

<ul id="list_of_tasks" class="ui-sortable"> 
  <li id="page_1"> <div class="datablock"> Datablock 1 </div></li> 
  <li id="page_2"> <div class="datablock"> Datablock 2 </div></li> 
</ul> 

</body> 
</html>

<html>

<head>

<style>

.datablock {

padding: 15px; border: 1px solid green;

}

ul {

list-style-type: none;

}

</style>

$(document).ready(function(){

$("#list_of_tasks").sortable({

update: function(event, ui) {

$.post("ajax_sort.php", { type: "orderPages", pages: $('#list_of_tasks').sortable('serialize') }, function(response) {

console.log("Response: "+response);

});

}

});

</script>

</head>

<body>

<li id="page_1"> <div class="datablock"> Datablock 1 </div></li>

<li id="page_2"> <div class="datablock"> Datablock 2 </div></li>

</ul>

</body>

</html>

V prohlížeči si přes F12 zapnete konzoli a můžete sledovat, co skript provádí. Zde se bude pouze sestavovat dotaz na databázi,
ovšem v závislosti na množství tříděných položek bude velmi dlouhý. Je to však (jak už jsem naznačil výše) mnohem a mnohem lepší, než provádět tisíce krátkých dotazů.

Dotaz může vypadat například nějak takto:

Response: UPDATE produkt SET poradi = (CASE id WHEN 14 THEN 0 WHEN 18 THEN 1 WHEN 15 THEN 2 WHEN 16 THEN 3 WHEN 17 THEN 4

WHEN 19 THEN 5 WHEN 20 THEN 6 WHEN 21 THEN 7 WHEN 22 THEN 8 WHEN 23 THEN 9 WHEN 24 THEN 10 WHEN 25 THEN 11 WHEN 26 THEN 12

WHEN 27 THEN 13 WHEN 28 THEN 14 WHEN 29 THEN 15 WHEN 30 THEN 16 WHEN 31 THEN 17 WHEN 32 THEN 18 WHEN 33 THEN 19

WHEN 34 THEN 20 WHEN 35 THEN 21 WHEN 36 THEN 22 WHEN 37 THEN 23 WHEN 38 THEN 24 WHEN 39 THEN 25 WHEN 40 THEN 26

WHEN 41 THEN 27 WHEN 42 THEN 28 WHEN 43 THEN 29 WHEN 44 THEN 30 WHEN 45 THEN 31 WHEN 46 THEN 32 WHEN 47 THEN 33

WHEN 48 THEN 34 WHEN 49 THEN 35 WHEN 50 THEN 36 WHEN 51 THEN 37 WHEN 52 THEN 38 WHEN 53 THEN 39 WHEN 54 THEN 40 WHEN 55 THEN 41 WHEN 56 THEN 42 WHEN 57 THEN 43 WHEN 58 THEN 44 WHEN 59 THEN 45 WHEN 60 THEN 46 WHEN 61 THEN 47 WHEN 62 THEN 48 WHEN 63 THEN 49

WHEN 64 THEN 50 WHEN 65 THEN 51 WHEN 66 THEN 52 WHEN 67 THEN 53 WHEN 68 THEN 54 WHEN 69 THEN 55 WHEN 70 THEN 56

WHEN 71 THEN 57 WHEN 72 THEN 58 WHEN 73 THEN 59 WHEN 74 THEN 60 WHEN 75 THEN 61 WHEN 76 THEN 62 WHEN 77 THEN 63

WHEN 78 THEN 64 WHEN 79 THEN 65 WHEN 80 THEN 66 WHEN 81 THEN 67 WHEN 82 THEN 68 WHEN 83 THEN 69 WHEN 84 THEN 70

WHEN 85 THEN 71 WHEN 86 THEN 72 WHEN 87 THEN 73 WHEN 88 THEN 74 WHEN 747 THEN 75 WHEN 944 THEN 76 END CASE) WHERE id IN (14,18,15,16,17,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,

58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,747,944)

Mohlo by vás zajímat:

Ukládání objektů po přesunu na stránce

Update formuláře pomocí AJAXu

Bezpečnější upload souborů pomocí php

Odeslání obrázku AJAXem

Základy práce s IMAP

PHP Developer

Mohlo by vás zajímat: