开发者

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:

  1. Create a new list order
  2. Loop through the current rows in the table.
    Store the IDs at the current rows in list order
  3. Create a new list markersTemp
  4. Loop through list order
    Get the ID at position i in list order.
    Let markersTemp[i] be the element in markers (referred at the old position through id)
  5. Reset markers
  6. Set markers to markersTemp

Optimized:

  1. Create a new list order
  2. Loop through each row in the table.
    Push the element, as referred by the index as returned from getId() in order
  3. Overwrite markers by order.


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]+'), '');
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜