slidetoggle gridview在動態生成的「可展開」行

嗯，我有一種情況，我需要爲我的GridView的動態生成的行提供slidetoggle效果。我使用javascript + pagemethod來實現自動生成。slidetoggle gridview在動態生成的「可展開」行

這是我爲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>

我用下面的JavaScript來生成行ItemTemplate中動態地調用Web方法。

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中的slidetoggle。我改變了代碼，它的工作:)

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); 
}

來源

2012-02-27 Navyseal

這是更正的代碼，它的工作原理。

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); 
}

來源

2014-03-27 17:48:01 Navyseal

您是否嘗試過使用對象的clientID作爲函數的參數？

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

來源

2012-02-27 07:18:33 Drew

slidetoggle gridview在動態生成的「可展開」行

回答

相關問題