Question

我的网站中有一个相册库，希望用户可以在相册中对照片的顺序进行排序。在看完非常不同的方式之后，我遇到了这个例子http://www.west-wind.com/rick/photoalbum/demoMaui2006/Default.aspx?Admin=true，这正是我所需要的。

照片存储在uploads目录中，详细信息存储在数据库中。使用ListView显示图像，如下所示：

    <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" GroupItemCount="15">
        <LayoutTemplate>
            <table id="groupPlaceholderContainer" runat="server" border="0" cellpadding="0" cellspacing="0"
                style="border-collapse: collapse; width: 100%;">
                <tr id="groupPlaceholder" runat="server">
                </tr>
            </table>
        </LayoutTemplate>
        <GroupTemplate>
            <tr id="itemPlaceholderContainer" runat="server">
                <td id="itemPlaceholder" runat="server">
                </td>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# "~/uploads/"+Eval("OriginalFilePath") %>'
                rel="example1" Title='<%# Eval("PhotoName") %>'>
                <div>
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/uploads/"+Eval("ThumbFilePath") %>'
                        Width="130" Height="150" BorderStyle="None" />
                     <asp:Label ID="lblPhotoTitle" runat="server" Text='<%# Eval("PhotoName") %>' CssClass="photoTitle" ></asp:Label>
                </div>
            </asp:HyperLink>
        </ItemTemplate>

    </asp:ListView>


    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:fpaConnectionString %>"
        SelectCommand="fpa_SP_view_album_list_by_id" SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:QueryStringParameter DefaultValue="" Name="photo_album_id" QueryStringField="AlbumID"
                Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>
</div>

我想重新排列照片的顺序;更改字幕和/或删除照片，就像在示例中一样。

有人可以提供我需要遵循的步骤，以实现以下目标： - 首先显示数据库中Photo表中的照片（可以使用上面的listView） - 重新排列订单;更改标题和/或删除照片 - 最终更新照片表中的更改

我是编程新手，特别是jQuery，所以你可以提供/解释我需要遵循的步骤。

非常感谢任何帮助。

由于

Answer 1

如果您愿意，可以尝试 jquery UI 和可排序方法http://jqueryui.com/demos/sortable/

$("ListViewClientId")
.find("table")
.sortable({
           items:"tr",
           update: function() {
              $("#myHiddenFieldID").val(theNewPositionsArray);
           }
});

保存这些东西是另一个进步。您应该通过asp.net页面对象注册一个hiddenField Page.RegisterHiddenField或类似的东西。这样，您可以将数据保存到其中，并在用户单击“保存”按钮并处理其单击事件时进行检索。

使用jQuery Sortable对相册进行排序（重新排列顺序）

1 个答案: