動的に生成された「展開可能な」行のgridviewのslidetoggle

Question

まあ、私は、グリッドビューの動的に生成された行に滑り止め効果を与える必要がある状況があります。私は、自動生成を達成するためにjavascript + pagemethodを使用します。

これは私がウェブメソッドを呼び出すことによって動的に行を生成するには、次のJavaScriptを使用するGridView

    <asp:TemplateField> 
         <ItemTemplate> 
          <a href="javascript:void"> 
           <asp:Image ID="imgExpandCollapse" runat="server" ImageUrl="~/Images/expand.png" onclick='ShowDetails(this);' ToolTip="Toggle"/></a> 
          <asp:Label ID="lblUID" Style="display: none" runat="server" Text='<%# Eval("UID") %>'></asp:Label> 
         </ItemTemplate> 
        </asp:TemplateField> 

のための私のItemTemplateにあります。

function ShowDetails(ImgObj) { 

    if (ImgObj.src.toLowerCase().indexOf("expand") != -1) { 

     if (document.getElementById(ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")) != null) { 
      document.getElementById(ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")).style.display = ""; 
     } 
     else { 
      var newTr = document.createElement("tr"); 
      newTd = document.createElement("td"); 
      var UID = document.getElementById(ImgObj.id.replace("imgExpandCollapse", "lblUID")).innerHTML; 

      newTd.setAttribute("id", ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")); 
      newTd.setAttribute("colspan", "7"); 
      newTd.setAttribute("Style", "padding:0 0 0 0"); 
      newTd.innerHTML = "<div class='centerAlign'><img src='../Images/loading.gif'/></div>"; 
      PageMethods.GetLogResult(UID, OnSucceeded, OnFailed,newTd); 

      newTr.appendChild(newTd); 
      jQuery('#' + ImgObj.id.replace("imgExpandCollapse", "grdRow")).after(newTr); 
     } 
     ImgObj.src = "../Images/collapse.png"; 
    } 
    else { 
     if (document.getElementById(ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")) != null) { 
      document.getElementById(ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")).style.display = "none"; 
     } 
     ImgObj.src = "../Images/expand.png"; 
    } 

} 


function OnSucceeded(result, newTd) { 
    newTd.innerHTML = result; 
} 

function OnFailed(error) { 
    alert(error.id); 
} 

は今Slidetoggle（）を使用しての問題は、これらの行が自動生成され、それらが異なるIDを持っているということです。今誰かがこれで私を助けることができたら、私は感謝するでしょう。ありがとう。

編集： 明らかに、私はJqueryで滑り止めのためにサポートされていないテーブル行を「スライド」しようとしていました。私は、コードを変更し、それが働いた:)

function ShowDetails(ImgObj) { 

    if (ImgObj.src.toLowerCase().indexOf("expand") != -1) { 

     if (document.getElementById(ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")) != null) { 
      $("#" + ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")).slideToggle(); 
     } 
     else { 
      var newTr = document.createElement("tr"); 
      newTd = document.createElement("td"); 
      newDiv = document.createElement("div"); 

      var UID = document.getElementById(ImgObj.id.replace("imgExpandCollapse", "lblUID")).innerHTML; 

      newTd.setAttribute("colspan", "7"); 
      newTd.setAttribute("Style", "padding:0 0 0 0"); 

      newDiv.setAttribute("id", ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")); 
      newDiv.setAttribute("style", "text-align:center"); 
      newDiv.innerHTML = "<img src='../Images/loading.gif'/>"; 
      PageMethods.GetLogResult(UID, OnSucceeded, OnFailed, newDiv); 

      newTd.appendChild(newDiv); 
      newTr.appendChild(newTd); 

      jQuery('#' + ImgObj.id.replace("imgExpandCollapse", "grdRow")).after(newTr); 
      $("#" + newDiv.id).show(); 
     } 
     ImgObj.src = "../Images/collapse.png"; 
    } 
    else { 
     if (document.getElementById(ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")) != null) { 
      $("#" + ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")).slideToggle(); 
     } 
     ImgObj.src = "../Images/expand.png"; 
    } 
} 

function OnSucceeded(result, newDiv) { 
    newDiv.innerHTML = result; 
} 

function OnFailed(error) { 
    alert(error.id); 
} 

Answer 1

これは動作します修正されたコードです。

function ShowDetails(ImgObj) { 

     if (ImgObj.src.toLowerCase().indexOf("expand") != -1) { 

      if (document.getElementById(ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")) != null) { 
       $("#" + ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")).slideToggle(); 
     } 
     else { 
      var newTr = document.createElement("tr"); 
      newTd = document.createElement("td"); 
      newDiv = document.createElement("div"); 

      var UID = document.getElementById(ImgObj.id.replace("imgExpandCollapse", "lblUID")).innerHTML; 

      newTd.setAttribute("colspan", "7"); 
      newTd.setAttribute("Style", "padding:0 0 0 0"); 

      newDiv.setAttribute("id", ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")); 
      newDiv.setAttribute("style", "text-align:center"); 
      newDiv.innerHTML = "<img src='../Images/loading.gif'/>"; 
      PageMethods.GetLogResult(UID, OnSucceeded, OnFailed, newDiv); 

      newTd.appendChild(newDiv); 
      newTr.appendChild(newTd); 

      jQuery('#' + ImgObj.id.replace("imgExpandCollapse", "grdRow")).after(newTr); 
      $("#" + newDiv.id).show(); 
     } 
     ImgObj.src = "../Images/collapse.png"; 
    } 
    else { 
     if (document.getElementById(ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")) != null) { 
      $("#" + ImgObj.id.replace("imgExpandCollapse", "grdRowDetails")).slideToggle(); 
     } 
     ImgObj.src = "../Images/expand.png"; 
    } 
} 

function OnSucceeded(result, newDiv) { 
    newDiv.innerHTML = result; 
} 

function OnFailed(error) { 
    alert(error.id); 
} 

Answer 2

あなたの関数のparamerterとして、オブジェクトのクライアントIDを使用してみましたか？

<asp:Image ID="imgExpandCollapse" runat="server" ImageUrl="~/Images/expand.png" onclick='ShowDetails(<%=imgExpandCollapse.ClientID%>);' ToolTip="Toggle"/></a>