2011-02-06 137 views
0

我有我的網站內的相冊畫廊,並希望允許用戶在一個相冊內的排序自己的照片順序的相冊(重新排列順序)。在看過非常不同的方式後,我遇到了這個例子http://www.west-wind.com/rick/photoalbum/demoMaui2006/Default.aspx?Admin=true,這正是我需要的。排序使用jQuery可排序

的照片存儲在數據庫中的上傳目錄和細節。使用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> 

我想重新排列照片的順序;像示例中那樣更改字幕和/或刪除照片。

所以可能有人請提供我需要的順序以實現步驟如下: - 首先在數據庫中顯示從照片表中的照片(可以使用上面的ListView) - 重新排列順序;更改標題和/或刪除照片 - 最終更新照片列表中的更改

我是編程新手,特別是jQuery,因此您可以提供/解釋我需要遵循的步驟。

任何幫助將不勝感激。

感謝

回答

0

,你可以,如果你想,嘗試jQuery UI的和排序方法http://jqueryui.com/demos/sortable/

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

要保存這個東西是另一個進步。你應該通過asp.net頁面對象註冊一個hiddenField Page.RegisterHiddenField或類似的東西。這樣,您可以將數據保存到其中,並在用戶單擊「保存」按鈕並處理它的單擊事件時檢索它。