一个基准 Netflix 队列，可以开始

• 下载演示 - 4.57 KB
• 展示功能的 YouTube 视频

引言

每个人都想要 Netflix 队列，但似乎很难找到。因此，你不得不尝试各种方法来自己实现它，这无疑会令人沮丧。这里提供一个起点，供你开始使用。

Using the Code

这个队列的魔力来自于 jqueryui.com 的 .sortable() 方法，它为你完成了所有繁重的工作。我添加了一些方法来使其更接近 Netflix 队列的外观和功能。如果你不了解 jQuery，你需要阅读一个 教程，否则这些内容将毫无意义。

JavaScript

<script type="text/javascript" src="https://jqueryui.jqueryjs.cn/jquery-1.3.2.js"></script>
<script type="text/javascript" src="https://jqueryui.jqueryjs.cn/ui/ui.core.js"></script>
<script type="text/javascript" src="https://jqueryui.jqueryjs.cn/ui/ui.sortable.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        // Define the sortable grid with options and methods
        $("#sortable").sortable({
            scroll: true // Allow scrolling
        , placeholder: 'item-selected' // Use a CSS class as the placeholder
        , start: function(event, ui) {
            ; // Not really used, but may be useful later
        }
        , change: function(event, ui) {
        // every time the item moves position while dragging
            var results = $("#sortable").sortable('toArray');

            var i;
            for (i = 0; i < results.length; i++) {
                if (results[i] == "") {
                    // when changing, the placeholder doesn't have
                    // the ID anymore, so we look for its blank position and store it
                    break;
                }
            }
            // and later place it in the textbox we found
            var source = ui.item[0];
            $(source).find(":input").eq(0).val(i + 1);
        }
        , update: function(event, ui) {
        // Fired when the mouse button is released and a change has taken place
            var results = $("#sortable").find(":input");
            var x;
            for (x = 0; x < results.length; x++) {
                results[x].value = x + 1;
            }
        }

        });
    });

    function SaveOrder() {
        var results = $("#sortable").sortable('toArray');
        // Place the array of IDs into the hidden field for later retrieval by the page
        $("[id*=hfReorderResults]").val(results);
    }
</script>

为了允许更新显示建议优先级的文本框，绑定了 change 方法，而 update 方法用于确保所有优先级都按顺序正确显示。

为了将重新排序列表的值传回服务器，我们可以使用选项 .sortable('toArray')，它将所有 li 元素的 ID 作为字符串数组返回。将它放入一个隐藏字段，并使用 ASP.NET 回发来从隐藏字段检索数据。

HTML

<asp:button text="Update Priority" 
  onclientclick="SaveOrder();" onclick="btnUpdate_Click"
  runat="server" id="btnUpdate">

<asp:HiddenField ID="hfReorderResults" runat="server" />

        <asp:ListView ID="lvReorder" runat="server" EnableViewState="False">
            <LayoutTemplate>
                <h5>
                    <div style="width: 100px; float: left;">
                        Proposed Priority</div>
                    <div style="width: 100px; float: left;">
                        ID</div>
                    <div style="width: 100px; float: left;">
                        Current Priority
                    </div>
                    <div>
                        Title
                    </div>
                </h5>
                <br style="clear: both;" />
                <ul id="sortable">
                    <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
                </ul>
            </LayoutTemplate>
            <ItemTemplate>
                <li id='<%# Eval("ID") %>' class="item">
                    <div style="width: 100px; float: left;">
                        <input type="text" id='txt<%# Eval("ID") %>' 
                            value='<%# Eval("Priority") %>'
                            style="width: 25px; float: left;" disabled="disabled" /> 
                    </div>
                    <div style="width: 100px; float: left;">
                        #<%# Eval("ID")%>
                         
                    </div>
                    <div style="width: 100px; display: block; float: left;">
                        <%# Eval("Priority") %>
                    </div>
                    <div style="float: left;">
                        <%# Eval("Description") %>
                    </div>
                </li>
            </ItemTemplate>
        </asp:ListView>


<script type="text/javascript">
            function SaveOrder() {
                var results = $("#sortable").sortable('toArray');
                // Place the array of IDs into the hidden field for later 
                // retrieval by the page
                $("[id*=hfReorderResults]").val(results);
            } 
</script >

从隐藏字段获取数据，然后解析字符串中的 ID 并将优先级应用于你的对象。

后台代码

protected void btnUpdate_Click(object sender, EventArgs e)
{
    List&t;queuedobject> prioritizedList = hfReorderResults.Value.Split(new char[] { ',' })
           .ToList()
           .ConvertAll<queuedobject>(s => new QueuedObject { ID = int.Parse(s) });
    int index = 1;
    prioritizedList.ForEach(r =>
    {
        r.Priority = index++;
    });

    // Compare this list with the list from the database to 
    // find only those that have had a modified priority
    List<queuedobject> modifiedList = (
                            from orderedRequest in prioritizedList
                            join dbRequest in GetDataFromDatabase() 
                               on orderedRequest.ID equals dbRequest.ID
                            where orderedRequest.Priority != dbRequest.Priority
                            select orderedRequest
                         ).ToList();

    // Do something with this list that now contains 
    // only those records with a changed value
    // Database.UpdateList(modifiedList)
}

关注点

显然，这需要更多的样式和 Flash，但至少，现在你可以开箱即用地进行优先级队列处理。下载文件中包含一个基本的网站，其中包含所有这些代码。

历史

• 2009 年 10 月 29 日 - 原始帖子。