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.
PS: Ca lectură suplimentară vă recomand Extending the jQuery Sortable With Ajax & MYSQL.
0 comentarii