jquery sortable,获取列表顺序

时间:2010-01-22 18:05:53

标签: asp.net-mvc jquery-ui

在使用jquery进行排序时,有没有返回列表中的某个等级?从本质上讲,我想做成千上万的其他人正在做的事情(我已经在stackoverflow上进行了彻底搜索)并从可排序的数据库中进行了数据库更新。

数据库中的每个项目都有一个“Position”属性 - 最初设置为0. ul被填充并抽出,我想在更新时路由回控制器,并将它们的位置存储在列表中。

我使用ASP.NET MVC / C#作为我的代码库 - 但是我无法找到完整的示例。

1 个答案:

答案 0 :(得分:4)

哈!我想到了。我在这里张贴供大家欣赏。

$("ul#unorderedListIdGoesHere li").index(ui.item);


<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Models.Section>>" %>

    <ul id="sections">
    <% foreach (var item in Model) { %>
    <li class="ui-state-default" id="<%= item.Id %>">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span><%= Html.Encode(item.Name) %>
    </li>
    <% } %>
    </ul>

<script type="text/javascript">
    $(document).ready(function() {
    $("#sections").sortable({
    update: function(event, ui) {
            $("ul#sections li").each(function(){
                var position = $("ul#sections li").index(this);
                var section = $(this).attr("id");
                $.post("/Sections/Position", { position: position, section: section });
                })
            }
        }).disableSelection();
    });
</script>
<style type="text/css">
    #sections { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sections li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sections li span { position: absolute; margin-left: -1.3em; }
</style>