带有嵌套gridview的jquery在asp.net中答案

【问题标题】：jquery with nested gridview in asp.net带有嵌套gridview的jquery在asp.net中
【发布时间】：2014-11-19 20:44:32
【问题描述】：

我知道我的问题有很多解决方案。但我想在我的代码中做一些不同的事情。我想要做的是，当我点击加号时，该行应该被隐藏。并且相应的子表将可见。这对我有用。现在的问题是，当折叠我的子行时，对应的行应该是可见的。这是我用于嵌套 gridview 的 jquery（嵌套 Gridview 工作正常）

  $("[src*=plus]").live("click", function () {


        $(this).closest("tr").after("<tr><td><img src='../Images/gvminus.png'> </img></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
        //$(this).attr("src", "../Images/gvminus.png");
        $(this).closest("tr").andSelf().css('display', 'none');

    });
    $("[src*=minus]").live("click", function () {

        $(this).closest("tr").andSelf().remove();
        $(this).closest("tr").prev().css('display','');
    });

这里父子网格如下

<asp:GridView ID="gvParent" runat="server" AutoGenerateColumns="false" DataKeyNames="ID"
        OnRowDataBound="gvParent_OnRowDataBound" Width="100%">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <img alt="" style="cursor: pointer" src="../Images/gvplus.png" />
                    <asp:Panel ID="pnlChild" runat="server" Style="display: none;">
                        <asp:GridView ID="gvChild" runat="server" AutoGenerateColumns="false" BorderStyle="Double"
                            BorderColor="#df5015" GridLines="None" Width="100%">
                            <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
                            <RowStyle BackColor="#E1E1E1" />
                            <AlternatingRowStyle BackColor="White" />
                            <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
                            <Columns>
                                <asp:BoundField DataField="ID" HeaderText="ID" HeaderStyle-HorizontalAlign="Left" />
                                <asp:BoundField DataField="Child" HeaderText="ChildValue" HeaderStyle-HorizontalAlign="Left" />
                            </Columns>
                        </asp:GridView>
                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="Catagory" HeaderText="Catagory" />
        </Columns>
    </asp:GridView>

【问题讨论】：

而不是使用最接近的为每一行添加一个 id。然后用它找到正确的行
Sam 我已经用 gridview 更新了我的代码。那么你能告诉我如何为每一行设置 id 吗？

标签： jquery asp.net

【解决方案1】：

function GridViewDesign() {
    var i = 0
    $(".Test").each(function () {
        if ($(this)[0].innerHTML.indexOf("Hide") != -1) {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $('#cphContent_gvSchMaint_pnlSchedule_' + i)[0].innerHTML + "</td></tr>");
            $('#cphContent_gvSchMaint_pnlSchedule_' + i)[0].innerHTML = "";
        }
        i = i + 1;
    });
}


<asp:TemplateField AccessibleHeaderText="ShowHide">
    <HeaderTemplate>
    </HeaderTemplate>
    <ItemTemplate>
        <div class="topdarkcommon dark drow" id="flex">
            <div class="whitetext">
                <asp:LinkButton ID="lnkShowHide" runat="server" CommandName="Show" CssClass="Test"></asp:LinkButton>
            </div>
        </div>
    </ItemTemplate>
    <ItemStyle Width="50px" Height="42px" />
</asp:TemplateField>
<asp:TemplateField AccessibleHeaderText="UpcomingPanel">
    <HeaderTemplate>
    </HeaderTemplate>
    <ItemTemplate>
        <asp:Panel ID="pnlSchedule" runat="server" Style="position: relative">
            <asp:GridView ID="gvUpCommingSchedule" runat="server" Width="100%" CssClass="ChildGrid" AutoGenerateColumns="False"
                BorderColor="Black">
                <Columns>
                    <asp:BoundField DataField="UpComingDate" meta:resourcekey="BoundFieldResource1">
                        <ItemStyle Width="20%" />
                    </asp:BoundField>
                    <asp:BoundField DataField="SchTask" meta:resourcekey="BoundFieldResource2">
                        <ItemStyle Width="55%" />
                    </asp:BoundField>
                    <asp:BoundField DataField="ResponsiblePersonName" meta:resourcekey="BoundFieldResource3">
                        <ItemStyle Width="25%" />
                    </asp:BoundField>
                </Columns>
            </asp:GridView>
        </asp:Panel>
    </ItemTemplate>
    <ItemStyle CssClass="testClass" />
    <HeaderStyle CssClass="testClass" />
</asp:TemplateField>

【讨论】：

【解决方案2】：

试试这个：

 <script type="text/javascript">
    $("[src*=plus]").live("click", function () {
        $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
        $(this).attr("src", "/Content/img/minus.gif");
    });
    $("[src*=minus]").live("click", function () {
        $(this).attr("src", "/Content/img/plus.gif");
        $(this).closest("tr").next().remove();
    });

...
<asp:TemplateField ItemStyle-CssClass="templateField-Plus">
   <ItemTemplate>
      <img alt="" style="cursor: pointer" src="/Content/img/plus.gif" />

...

一个真实的例子是here

对我来说效果很好，希望对你也一样）

【讨论】：