开发者

Use jquery sortable to manage order of a list in database?

I have a table of movies and a table of actors managed by a simple CMS built in c#. The user will need to adjust the order of the actors in a list on the movie page. I think the jquery sortable would provide a very nice UI for this and I can implement it on a gridview perfectly well. Code below:

<script type="text/javascript">
    $(function () {
        $('table').filter(function () {
            return $('tr', this).length > 2;
        })
        .sortable({
            items: 'tr:not(:first)',
            axis: 'y',
            scroll: true               
        }).disableSelection();
    });
</script>

I was also able to grab the new position of a dragged item using code someone shared on the site as follows:

    stop: function (event, ui) {
        alert("New position: " + ui.item.index());
        var x1 = ui.item.index();
    } 

That second snippet is just to prove I can read the new position, but is not useful for what I need to do.

The actors table has rows with the relevent fields of actorID, movieID and order. When actors are re-ordered in the UI, I need to write the new order values back to the database. This is where I am questioning the best way to do this.

1) Is the sortable widget a reasonable choice in the first place for managin开发者_C百科g data in a db?

2) If so, what is a smart approach to writing the udpated values back? Performance isn't going to be critical since there are only a handful of users at most, but there could be close to 100 items in the list although the chance are that only one or two would be re-ordered at any time.


1) I've got a page where I do something similar with the jQuery table drag & drop plugin. The user sorts the table by dragging rows around, and we save that order (it gets used in PDF reports and such). If the UI works for your purpose then it's entirely reasonable to use sortable to do that. :)

2) The most straightforward way is that whenever you change the sort order on something, go through the entire list and build an array of the Ids and orders (or even just the Ids in order). You'll then use the jQuery ajax() command to send that array back to the server.

On the server you have a controller action that expects an int array (or whatever you're passing back). You can then save that order to the server. That part is just standard server code, so its pretty easy.

I'd give you some example code, but I don't have time right now unfortunately. :( It's pretty easy to make an ajax call using jQuery though, and there's lots of examples. :)

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜