Question

我有一个需要多个嵌套网格的数据集。我目前正在使用JavaScript / Jquery来折叠/显示嵌套网格。它适用于嵌套的第一级，但不适用于第二级。点击第二级时它不会做任何事情。在调试时，它会通过代码但不显示/隐藏网格。

 <script type="text/javascript">
        function divexpandcollapse(divname) {
            var img = "img" + divname;
            if ($("#" + img).attr("src") == "images/plus.png") {
                $("#" + img)
                .closest("tr")
                .after("<tr><td></td><td colspan = '100%'>" + $("#" + divname)
                .html() + "</td></tr>");
                $("#" + img).attr("src", "images/minus.png");
            } else {
                $("#" + img).closest("tr").next().remove();
                $("#" + img).attr("src", "images/plus.png");
            }
        }
    </script>
        <asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False" ShowHeaderWhenEmpty="True" EmptyDataText="No Info"
        OnRowDataBound="gv1_RowDataBound" OnRowCommand="gv_RowCommand">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <a href="JavaScript:divexpandcollapse('div<%# Eval("id") %>');">
                        <img alt="Details" id='imgdiv<%# Eval("id") %>' src="images/plus.png" /></a>
                    <div id='div<%# Eval("id") %>' style="display: none;">
                        <asp:GridView ID="gv2" runat="server" AutoGenerateColumns="False" ShowFooter="false"
                            OnRowDataBound="gv2_RowDataBound">
                            <Columns>
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <a href="JavaScript:divexpandcollapse('divMail<%# Eval("number") %>');">
                                            <img alt="DetailsMail" id='imgdivMail<%# Eval("number") %>' src="images/plus.png" /></a>
                                        <div id='divMail<%# Eval("number") %>' style="display: none;">
                                            <asp:GridView ID="gv3" runat="server" AutoGenerateColumns="False">
                                                <Columns>
                                                    <asp:BoundField DataField="df1" HeaderText="name" />
                                                    <asp:BoundField DataField="df2" HeaderText="name2" />
                                                </Columns>
                                            </asp:GridView>
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="df1" HeaderText="name" />
                            </Columns>
                        </asp:GridView>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="df5" HeaderText="name" />
            <asp:BoundField DataField="df6" HeaderText="name" />
            <asp:BoundField DataField="df7" HeaderText="name" />

        </Columns>
    </asp:GridView>

Answer 1

我终于能够使嵌套的girdviews工作。

<script type="text/javascript">
            function divexpandcollapse(divname) {
                var img = "img" + divname;
                if ($("#" + img).attr("src") == "images/plus.png") {
                    $("#" + img).attr("src", "images/minus.png");
                    $("#" + divname).show();
                } else {
                    $("#" + divname).hide();
                    $("#" + img).attr("src", "images/plus.png");
                }
            }
        </script>

<asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False" ShowHeaderWhenEmpty="True" EmptyDataText="No Info" OnRowDataBound="gv1_RowDataBound" OnRowCommand="gv_RowCommand">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <a href="JavaScript:divexpandcollapse('div<%# Eval("id") %>');">
                            <img alt="Details" id='imgdiv<%# Eval("id") %>' src="images/plus.png" /></a>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="df5" HeaderText="name" />
                <asp:BoundField DataField="df6" HeaderText="name" />
                <asp:BoundField DataField="df7" HeaderText="name" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <tr>
                            <td>
                                <div id='divMail<%# Eval("id") %>' style="display: none; margin-left: 25px;">
                                    <asp:GridView ID="gv2" runat="server" AutoGenerateColumns="False" ShowFooter="false" OnRowDataBound="gv2_RowDataBound">
                                        <Columns>
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <a href="JavaScript:divexpandcollapse('divMail<%# Eval("number") %>');">
                                                        <img alt="DetailsMail" id='imgdivMail<%# Eval("number") %>' src="images/plus.png" /></a>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                            <asp:BoundField DataField="df1" HeaderText="name" />
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <tr>
                                                        <td>
                                                            <div id='divMail<%# Eval("number") %>' style="display: none;">
                                                                <asp:GridView ID="gv3" runat="server" AutoGenerateColumns="False">
                                                                    <Columns>
                                                                        <asp:BoundField DataField="df1" HeaderText="name" />
                                                                        <asp:BoundField DataField="df2" HeaderText="name2" />
                                                                    </Columns>
                                                                </asp:GridView>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                        </Columns>
                                    </asp:GridView>
                                </div>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

我最终使用了jQuery show（）和Hide（）函数。然后，我修改了代码，将嵌套的网格放在最后一列的templatefield中。我在网格周围放置了“ tr”和“ td”块，以便在扩展时可以正确显示。

多个嵌套网格在点击时不会展开

1 个答案: