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を、切り替えたいフィールドを含むTRのIDとして配置することをお勧めします。次に、でexpandCollapseClickIDも渡して、行のスタイルをに設定できるようにします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が渡されます。もちろん、これは、ページが取得されたときにテーブルが完全に入力されていることを前提としており、詳細を表示/非表示にするだけです。

于 2012-06-28T01:54:34.167 に答える