我知道我的问题有很多解决办法。但我想在我的代码中做一些不同的事情。 我想要做的是,当我点击加号时,该行应该隐藏。和对应的子表将可见。这对我有用。现在的问题是,在折叠我的子行时,应该可以看到对应的行。 这是我的嵌套gridview(嵌套Gridview worksfine)的jquery
$("[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>
答案 0 :(得分:0)
试试这个:
<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
对我来说效果很好,希望对你来说也一样)
答案 1 :(得分:0)
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>