Question

我正在使用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><br /><br />
                        </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>
                            <br />
                            <br />
                            <asp:Label ID="lblNoPost" runat="server" Font-Size="Large" Font-Bold="true" Text="Non ci sono record !"> </asp:Label>
                            <br />
                            <br />
                        </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;">
                            <br />
                            <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？

有可能吗？

由于

Answer 1

您的jQuery代码需要相对于单击的按钮（see fiddle）查找div元素。假设您将“展开/隐藏分割”链接放在课程toggleButton上，这样的内容可能对您有用：

$(".toggleButton").click(function(){
  $(this).closest("table").next(".toggle1").toggle();
});

Answer 2

您需要使用正确的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><br />
                    <br />

看，我使用过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使用下一个{{1}即div。然后只需调用divDetail即可使其正常工作。

Answer 3

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

Answer 4

您可以使用数据属性。

在您的切换按钮上添加如下内容：

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

});

快速编写代码，应该像这样工作。但您可能必须重命名某些变量

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

4 个答案: