Question

我在页面上有一个列表视图，我正在尝试模拟树视图的切换效果。首次绑定时，详细信息元素（LBL_ActionTitle，LBL_Action，LBL_UrlTitle，LBL_Url）设置为visibility = false。我希望元素的click事件（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>

Answer 1

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

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

然后在Javascript（伪代码）

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

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

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

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

切换ListView中特定元素的可见性

1 个答案: