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:
Posta un commento