jQuery sortable and array resort
I have an array of elements: markers
and a table which updates it's rows to populate with the data stored within markers
. markers
itself houses an object marker
which has a latitude and longitude amongst other things.
When I populate the table with the details from the markers
array I give each row an ID based on i
as it loops through.
On this table I have jQuery sortable. I am looking for a way to re-order my markers
array each time the rows are sorted, so that the position of the item in the array is actually it's sort order value. That way, I can simply loop through the array at any time and see it's most up to date order.
So far I have the table generating as should and the markers
array populated. I am even able to grab back the order of the rows after shuffling them around, at the moment I store them in an array orders
and just alert, this works (ie. 0,1,2 > dragged to resort > 2,0,1). I was hoping for a way of now using the set of values in orders
to resort my original markers
array.
I thought it would involve creating a temporary array markersTemp
with which to store the values saved in markers
but in the new order, except I'm not sure how to loop through to save each one. Anyone开发者_如何学C done anything similar?
function resort() {
var order = []; // Get the order of the new rows
$('#createMapDirections tbody tr').each(function(i, elem){
order.push(markers[getId($("td", elem))]);
});
markers = order;
updateAll();
}
Old procedure:
- Create a new list
order
- Loop through the current rows in the table.
Store the IDs at the current rows in listorder
- Create a new list
markersTemp
- Loop through list
order
Get the ID at positioni
in listorder
.
LetmarkersTemp[i]
be the element inmarkers
(referred at the old position throughid
) - Reset
markers
- Set
markers
tomarkersTemp
Optimized:
- Create a new list
order
- Loop through each row in the table.
Push the element, as referred by the index as returned fromgetId()
inorder
- Overwrite
markers
byorder
.
Ahh, apologies for wasting everyones time! 5 more minutes and I got it solved. For others with the problem, here's my entire function called after a sortable dropped event.
I wouldn't say it was entirely over though. I would be very interested to know if this is the most efficient/tidiest way to do this. I am aware there is an array .sort() function built into javascript, could this be used instead?
function resort() {
var order = new Array(); // Get the order of the new rows
for (var i = 0; i < markers.length; i++) {
order.push(getId($('#createMapDirections tbody tr').eq(i).find('td')));
}
var markersTemp = new Array();
for (var i = 0; i < markers.length; i++) {
var id = order[i];
markersTemp[i] = markers[id];
}
markers.length = 0;
markers = markersTemp.slice();
updateAll();
}
Edit:
Ok so my table on the page is laid out like so:
<table><tbody>
<tr id="row0"><td></td></tr>
<tr id="row1"><td></td></tr>
<tr id="row2"><td></td></tr>
</tbody></table>
getId() simply grabs the id of the TR and runs a little regex to get only the number. When they are resorted then the order might be something like: row2, row0, row1. I store this order in orders
(a temporary array) and populate markersTemp
(another temporary array) with the values of markersTemp
but in the new order.
function getId(button) {
return $(button).parents('tr').attr('id').replace(new RegExp('\[A-Za-z]+'), '');
}
精彩评论