martedì 10 giugno 2008

Javascript: riordinare oggetti di una lista interattivamente

Un frammento di Javascript che permette di riordinare gli oggetti di una lista (facendo clic su "UP" e "DOWN"):

function Item(_id, _name, _position)
{
 this.id = _id;
 this.name = _name;
 this.position = _position;
}

Item.prototype.toString = function()
{
 return "[" + this.id + "] " + this.name;
}

function sortBy(item1, item2)
{
 return item1.position-item2.position;
}

function printMe(_arr)
{
 clearOutput();
 var parameter = "";
 for (i=0; i<_arr.length; i++)
 {
  var item = _arr[i]; 
  output(item);
  output(" | ");
  upControl(i);
  output(" | ");
  downControl(i, (_arr.length-1));
  output("
"); parameter += item.id + "=>" + item.position + ";"; } output("
"+parameter); } function upControl(index) { if (index>0) { output("<span onclick='javascript:up("+index+");'>UP</span>"); } } function downControl(index, _max) { if (index<_max) { output("<span onclick='javascript:down("+index+");'>DOWN</span>"); } } function up(index) { var index1 = arr[index].position; var index2 = arr[index-1].position; arr[index].position=index2; arr[index-1].position=index1; printMe(arr.sort(sortBy)); } function down(index) { var index1 = arr[index].position; var index2 = arr[index+1].position; arr[index].position=index2; arr[index+1].position=index1; printMe(arr.sort(sortBy)); } function clearOutput(x) { var panel = document.getElementById('panel'); panel.innerHTML = ""; } function output(x) { var panel = document.getElementById('panel'); panel.innerHTML += x; }

Per provarlo:

<body>
 <div id='panel' style='border: 1px solid black;'>
 </div>
 <script>
 var arr = new Array(6);
 arr[0] = new Item(10, "Articolo 6", 6);
 arr[1] = new Item(40, "Articolo 5", 5);
 arr[2] = new Item(100, "Articolo 4", 4);
 arr[3] = new Item(130, "Articolo 3", 3);
 arr[4] = new Item(400, "Articolo 2", 2);
 arr[5] = new Item(555, "Articolo 1", 1);
 printMe(arr.sort(sortBy));
 </script>
</body>
Elementi di interesse sono:
  • la modalità di creazione di nuovi oggetti in Javascript (v. Item) (vedere anche questo tutorial)
  • come utilizzare un criterio di ordinamento per gli array (v. sortBy)

Nessun commento: