如何使用jquery显示/隐藏ListView的行-Java 学习之路

我正在使用Asp.net Listview在“网格”中显示数据 . 这是我的代码

<asp:ListView ID="lvDmr" runat="server" DataSourceID="dsDmr" DataKeyNames="id">
            <ItemTemplate>
                <table style="width: 100%;">
                    <tr style="width: 100%; border-bottom:1px solid gray;">
                        <td class="colonna-griglia">
                            <a href="#" ..'here javascript'>Expand/Hide Div</a>


                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("rivista")%>
                        </td>
                        <td class="colonna-griglia">
                            <a href='dmr.aspx?cliente=<%# Eval("cliente")%>'>
                                <%# Eval("cliente")%></a>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("categoria")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("sottocategoria")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("prodotto")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("formato")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("posizionamento")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("spazio")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("id")%>
                        </td>
                    </tr>
                </table>
                <div runat="server" id="divDetail" class="toggle1" style="display:none;padding: 5px 5px 5px 5px; background-color:#DEDEDE;">
                    Dettaglio
                </div>
            </ItemTemplate>
            <EmptyDataTemplate>
                <table id="Table1" runat="server" style="">
                    <tr>
                        <td>
                            

                            

                            <asp:Label ID="lblNoPost" runat="server" Font-Size="Large" Font-Bold="true" Text="Non ci sono record !"> </asp:Label>
                            

                            

                        </td>
                    </tr>
                </table>
            </EmptyDataTemplate>
            <LayoutTemplate>
                <table id="Table2" runat="server" style="width: 100%;" cellpadding="2" cellspacing="2">
                    <thead>
                        <tr runat="server" id="headerRow"  >
                            <th class="colonna-griglia">

                            </th>
                            <th class="colonna-griglia">
                                Rivista
                            </th>
                            <th class="colonna-griglia">
                                Cliente
                            </th>
                            <th class="colonna-griglia">
                                Categoria
                            </th>
                            <th class="colonna-griglia">
                                Sottocategoria
                            </th>
                            <th class="colonna-griglia">
                                Prodotto
                            </th>
                            <th class="colonna-griglia">
                                Formato
                            </th>
                            <th class="colonna-griglia">
                                Posizionamento
                            </th>
                            <th class="colonna-griglia">
                                Spazio
                            </th>
                            <th class="colonna-griglia">
                                id
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr runat="server" id="itemPlaceholder" />
                    </tbody>
                    <tr id="Tr3" runat="server">
                        <td id="Td2" runat="server" style="text-align: center; font-size: medium;">
                            

                            <asp:DataPager ID="DataPager1" runat="server" PageSize="24" QueryStringField="page">
                                <Fields>
                                    <asp:NumericPagerField ButtonType="Link" NumericButtonCssClass="PageNumber" NextPreviousButtonCssClass="PageNumber"
                                        NextPageText="Next" PreviousPageText="Prev" CurrentPageLabelCssClass="PageNumberCurrent" />
                                </Fields>
                            </asp:DataPager>
                        </td>
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>

我想允许用户在每行下显示/隐藏div divDetail （如主细节），点击每行附近的图标/按钮 .

问题是每个div在asp.net渲染之后改变他的名字（因为我使用runat = server） . 那么我怎样才能使用jquery或javascript显示隐藏正确行下的div？

可能吗？

谢谢

4 回答

您需要使用正确的jQuery选择器来实现此目的 . 我使用了以下，并且它有效 .

在 ListView 使用此 .

<asp:ListView ID="lvDmr" runat="server"  DataKeyNames="id">
    <ItemTemplate>
        <table style="width: 100%;">
            <tr style="width: 100%; border-bottom: 1px solid gray;">
                <td class="colonna-griglia">
                    <a href="#" onclick='ShowHide(this);'>Expand/Hide Div</a>

看，我用过 ShowHide . 然后使用以下JS函数 .

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
    function ShowHide(element) {
        $(element).parent().parent().parent().parent().next().toggle();
    }
</script>

制作，确定你包括 jQuery ，任何版本都可以，我使用 2.1.1 .

以下是输出 .

enter image description here

JS的解释 - a href 在表内是4级，即 table->tbody->tr->td ，所以我使用 .parent() 4次，然后使用 .next 得到下一个 div ，即 divDetail . 然后只需调用 toggle() 即可使其正常工作 .

回复于 2024-05-03T13:46:02+08:00

0
你的jQuery代码需要相对于被点击的按钮查找div元素（see fiddle） . 假设你给你的"Expand/Hide Div"链接类 toggleButton ，这样的东西可能对你有用：
```
$(".toggleButton").click(function(){
  $(this).closest("table").next(".toggle1").toggle();
});
```
回复于 2024-05-03T13:46:02+08:00
1
您可以使用它的数据属性 .

在您的切换按钮上添加如下内容：
```
data-toggle-id="<id of record>"
```
在您要切换的div上添加如下内容：
```
data-id="<id of record>"
```
然后，您可以向按钮添加单击处理程序：
```
$(".toggle_button").on("click", function(e) {

    toggle_id = $(this).data("toggle-id");

    $("div[data-id='" + toggle_id + "']").toggle();

});
```
只需快速编写代码，就应该像这样工作 . 但您可能必须重命名某些变量
回复于 2024-05-03T13:46:02+08:00
1

您可以为每一行提供一个类 . 单击类时，您可以获取所单击类的'id'，然后使用 .show()/.hide() 或 .toggle() 与jQuery，您的选择 . 我在jsFiddle上创建了一个小例子 - http://jsfiddle.net/9gnq34ct/

回复于 2024-05-03T13:46:02+08:00

如何使用jquery显示/隐藏ListView的行

4 回答

相关问题