Question

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

这是gridview的ItemTemplate

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

现在使用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);
}

Answer 1

您是否尝试过使用对象的客户端ID作为功能的参数？

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

Answer 2

这是有效的更正代码。

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

在动态生成的“可扩展”行中对gridview进行slidetoggle

2 个答案: