2011-02-06 2 views
0

나는 내 웹 사이트에 사진 앨범 갤러리가있어 앨범 내 사진 순서를 정렬 할 수 있습니다. 매우 다른 방법을 본 후에 나는이 예를 http://www.west-wind.com/rick/photoalbum/demoMaui2006/Default.aspx?Admin=true과 정확히 만나게되었습니다.jQuery Sortable을 사용하여 사진 앨범 정렬 (순서 재 배열)

사진은 업로드 디렉토리와 데이터베이스의 세부 정보에 저장됩니다. 이미지는 아래와 같이 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 테이블의 변경 사항을 업데이트하기위한 Final

저는 프로그래밍에 익숙하지 않습니다. 특히 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 또는 이와 비슷한해야합니다. 이렇게하면 데이터를 저장하고 사용자가 "저장"버튼을 클릭하고 클릭 이벤트를 처리하면 데이터를 검색 할 수 있습니다.

관련 문제