多个嵌套网格在单击时未展开

Posted 2023-05-08

【中文标题】多个嵌套网格在单击时未展开

【英文标题】：multiple nested grid not expanding on click

【发布时间】：2018-11-25 16:42:18

【问题描述】：

我有一个需要多个嵌套网格的数据集。我目前正在使用 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  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  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>

【问题讨论】：

对于二级嵌套网格，1.图像图标是否变为减号？ 2.$("#" + img).closest("tr")是否返回任何表格行？

no 图标不会改变。它不返回任何东西。单击图标时没有任何反应。

我建议添加“调试器；” divexpandcollapse 方法中的语句，然后尝试扩展第二级嵌套网格。检查它是否命中调试器语句。

我添加了一个调试器，它进入脚本并通过该部分显示第二个内部网格，但它仍然不显示。

我建议您在使用开发人员工具呈现页面后检查生成的 html。对于二级网格，<img id="imgdivMailid" ... 应该有一个父 <tr> 元素，$("#" + img).closest("tr") 应该返回那个父 tr 元素。

【参考方案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  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  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() 函数。然后我修改了代码，将嵌套网格放在最后一列的模板字段中。我将“tr”和“td”块放在网格周围，以便在展开时正确显示。