0

我在页面上有一个列表视图，并且正在尝试模拟树视图的切换效果。当第一次绑定细节元素（LBL_ActionTitle、LBL_Action、LBL_UrlTitle、LBL_Url）设置为visibility = false。我想让元素的点击事件（LB_ExpandCollapse）切换与其直接相关的细节元素的可见性。IE页面上没有该类型的所有元素。我不确定如何做到这一点，或者是否可以做到，并希望有人能指出我正确的方向。这是供参考的控件。

    <div id="logContainer">
        <asp:ListView ID=LV_Logs runat="server">
            <LayoutTemplate>
                <table border="0" cellpadding="0" cellspacing="0" style="width:100%">
                    <tr>
                        <td></td>
                        <td style="width:85%" />
                    </tr>
                    <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <hr />
                        <asp:LinkButton ID="LB_ExpandCollapse" runat="server" CausesValidation="false" OnClick="expandCollapse_Click">+</asp:LinkButton>
                        <asp:Label ID="LBL_MessageType" runat="server" Text='<%# Eval("messageType") %>'></asp:Label>
                        <hr />
                    </td>
                    <td style="text-align: right">
                        <hr />
                        <asp:Label ID="LBL_Message" runat="server" Text='<%# Eval("messageTime") %>'></asp:Label>
                        <hr />
                    </td>
                </tr>

                <tr style="text-align: left">
                    <td style="padding-left: 65px">
                        <asp:Label ID="LBL_ActionTitle" Visibility="false" runat="server" Text="User Action:"></asp:Label>
                    </td>
                    <td style="padding-left: 10px">
                        <asp:Label ID="LBL_Action" Visibility="false" runat="server" Text='<%# Eval("action") %>'></asp:Label>
                    </td>
                </tr>
                <tr style="text-align: left">
                    <td style="padding-left: 65px">
                        <asp:Label ID="LBL_UrlTitle" Visibility="false" runat="server" Text="URL:"></asp:Label>
                    </td>
                    <td style="padding-left: 10px">
                        <asp:Label ID="LBL_Url" runat="server" Visibility="false" Text='<%# Eval("url") %>'></asp:Label>
                    </td>
                </tr>

           </ItemTemplate>

        </asp:ListView>
        <asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="LV_Logs"
            PageSize="20" OnPreRender="DataPagerProducts_PreRender">
            <Fields>
                <asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False" />
                <asp:NumericPagerField />
                <asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False" />
            </Fields>
        </asp:DataPager>
4

1 回答 1

0

我建议您将记录的 ID 作为 ID 放在包含要切换的字段的 TR 上。然后在您expandCollapseClick还传递 ID，以便您可以将行的样式设置为display:block. 当然，这假设所有行都从display:none. IE。

<tr id='<%# Eval("recordId") %>' style='display:none'>

然后在 Javascript 中（伪代码）

function expandCollapseClick(row)
{
    document.getElementById(row).style.display = 'block';
}

然后更改您的按钮以执行客户端，如下所示：

<button onclick='expandCollapse(<%# Eval("recordId") %>)'>+</button>

这将调用代码来显示行，并传入正确行的 id。当然，这假设在检索页面时表格已完全填充，您要做的只是隐藏/显示详细信息。

于 2012-06-28T01:54:34.167 回答