Sortare cu jQuery UI

Autor: radu.capan. Data: 06.01.2011.
Clasat la: WebDevelopment. Taguri: jQuery, Webmasteri
0 comentarii. 1.437 afişări.

Am avut nevoie astăzi ca într-o webaplicaţie să permit utilizatorului să sorteze o listă de valori. Cum deja în proiect foloseam jQuery m-am gândit să încerc – pentru prima oară – componenta Sortable inclusă la pachet. Am admirat şi studiat exemplele, rămânând impresionat de flexibilitate (vedeţi Display as grid). Iar la final am ajuns la întrebarea: ei bine, şi presupunând că utilizatorul a sortat, cum salvez eu ce a lucrat el? Răspunsul l-am aflat de la metodele asociate pluginului jQuery UI Sortable. Cu „toArray” am obţinut rapid o listă gata de utilizat după o submitere să zicem via PHP (un $_POST[„campulascuns”], apoi un explode() şi ai ce îţi trebuie). Iată codul HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Test sortare</title>
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
    <link type="text/css" href="css/stylesheet.css" rel="stylesheet" />
    <style>
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 310px; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 22px; }
	#sortable li span { position: absolute; margin-left: -1.3em; }
	</style>
	<script type="text/javascript">
	$(function() {
        $( "input:submit").button();
		$("#sortable").sortable({
		  placeholder: "ui-state-highlight",
          update : function () { 
              var order = $('#sortable').sortable('toArray');
              $('#campulascuns').val(order);  
            }
		});
		$("#sortable").disableSelection();
	});
	</script>
</head>
<body>
<div class="demo">
<ul id="sortable">
	<li id="Cluj-Napoca" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Cluj-Napoca</li>
	<li id="Bucuresti" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Bucuresti</li>
	<li id="Oradea" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Oradea</li>
    <li id="Craiova" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Craiova</li>
    <li id="Timisoara" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Timisoara</li>
</ul>
</div>
<form method="post" action="ceva.php">
<!-- schimbati type="text" in type="hidden" -->
<p><input type="text" size="45" id="campulascuns"><br />
<input type="submit" value="Reordoneaza"></p>
</form>
</body>
</html>

Dacă vreţi să vedeţi codul în acţiune – trageţi cu mouse-ul localităţile – demonstraţia este mai jos, sau extern aici. Puteţi lua „acasă” spre studiere totul la pachet într-o arhivă zip. Evident, după etapa de texte trebuie la câmpul „campulascuns” schimbat tipul din text în hidden.