C# 在“动态生成”中滑动切换gridview；“可扩展的”；排

我有一种情况，需要为gridview动态生成的行提供滑动切换效果。我使用javascript+pagemethod来实现自动生成

这是我的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通过调用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);
}

函数显示详细信息（ImgObj）{
if（ImgObj.src.toLowerCase（）.indexOf（“展开”）！=-1）{
if（document.getElementById（ImgObj.id.replace（“imgExpandCollapse”，“grdRowDetails”）！=null）{
document.getElementById（ImgObj.id.replace（“imgExpandCollapse”、“grdRowDetails”））.style.display=“”；
}
否则{
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”）；
setAttribute（“样式”，“填充：0”）；
newTd.innerHTML=“”；
GetLogResult（UID、OnSucceeded、OnFailed、newTd）；
newTr.appendChild（newTd）；
jQuery（“#”+ImgObj.id.replace（“imgExpandCollapse”，“grdRow”））。在（newTr）之后；
}
ImgObj.src=“../Images/collapse.png”；
}
否则{
if（document.getElementById（ImgObj.id.replace（“imgExpandCollapse”，“grdRowDetails”）！=null）{
document.getElementById（ImgObj.id.replace（“imgExpandCollapse”、“grdRowDetails”））.style.display=“无”；
}
ImgObj.src=“../Images/expand.png”；
}
}
函数OnSucceeded（结果，newTd）{
newTd.innerHTML=结果；
}
函数OnFailed（错误）{
警报（error.id）；
}

现在使用Slidetoggle（）的问题是这些行是自动生成的，并且它们具有不同的ID。如果有人能帮我解决这个问题，我会很感激的。谢谢

编辑： 显然，我试图“滑动”一个表行，Jquery中的slidetoggle不支持这一点。我更改了代码，它成功了：）

函数显示详细信息（ImgObj）{
if（ImgObj.src.toLowerCase（）.indexOf（“展开”）！=-1）{
if（document.getElementById（ImgObj.id.replace（“imgExpandCollapse”，“grdRowDetails”）！=null）{
$（“#”+ImgObj.id.replace（“imgExpandCollapse”、“grdRowDetails”））.slideToggle（）；
}
否则{
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”）；
setAttribute（“样式”，“填充：0”）；
newDiv.setAttribute（“id”，ImgObj.id.replace（“imgExpandCollapse”，“grdRowDetails”）；
setAttribute（“样式”，“文本对齐：居中”）；
newDiv.innerHTML=“”；
GetLogResult（UID、OnSucceeded、OnFailed、newDiv）；
newd.appendChild（newDiv）；
newTr.appendChild（newTd）；
jQuery（“#”+ImgObj.id.replace（“imgExpandCollapse”，“grdRow”））。在（newTr）之后；
$（“#”+newDiv.id）.show（）；
}
ImgObj.src=“../Images/collapse.png”；
}
否则{
if（document.getElementById（ImgObj.id.replace（“imgExpandCollapse”，“grdRowDetails”）！=null）{
$（“#”+ImgObj.id.replace（“imgExpandCollapse”、“grdRowDetails”））.slideToggle（）；
}
ImgObj.src=“../Images/expand.png”；
}
}
函数onSucceed（结果，newDiv）{
newDiv.innerHTML=结果；
}
函数OnFailed（错误）{
警报（error.id）；
}

您是否尝试使用对象的clientID作为函数的参数？

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

---

这是正确的代码，可以正常工作

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

函数显示详细信息（ImgObj）{
if（ImgObj.src.toLowerCase（）.indexOf（“展开”）！=-1）{
if（document.getElementById（ImgObj.id.replace（“imgExpandCollapse”，“grdRowDetails”）！=null）{
$（“#”+ImgObj.id.replace（“imgExpandCollapse”、“grdRowDetails”））.slideToggle（）；
}
否则{
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”）；
setAttribute（“样式”，“填充：0”）；
newDiv.setAttribute（“id”，ImgObj.id.replace（“imgExpandCollapse”，“grdRowDetails”）；
setAttribute（“样式”，“文本对齐：居中”）；
newDiv.innerHTML=“”；
GetLogResult（UID、OnSucceeded、OnFailed、newDiv）；
newd.appendChild（newDiv）；
newTr.appendChild（newTd）；
jQuery（“#”+ImgObj.id.replace（“imgExpandCollapse”，“grdRow”））。在（newTr）之后；
$（“#”+newDiv.id）.show（）；
}
ImgObj.src=“../Images/collapse.png”；
}
否则{
if（document.getElementById（ImgObj.id.replace（“imgExpandCollapse”，“grdRowDetails”）！=null）{
$（“#”+ImgObj.id.replace（“imgExpandCollapse”、“grdRowDetails”））.slideToggle（）；
}
ImgObj.src=“../Images/expand.png”；
}
}
函数onSucceed（结果，newDiv）{
newDiv.innerHTML=结果；
}
函数OnFailed（错误）{
警报（error.id）；
}

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