具有展开和折叠功能的嵌套网格视图 - ASP.NET C#

Question

我在网格视图中有一个具有展开和折叠功能的网格视图。我已点击此链接来实现此目的。最初网格视图显示一个加号图标，如果用户单击它，它将变为减号图标，并将显示嵌套的网格视图。现在，如果嵌套网格视图中没有数据，我想将初始图标设置为减号。单击此减号图标时不应发生任何事情。如果嵌套网格视图上有数据，它的行为应该和现在一样正常。

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
DataKeyNames="CustomerID" OnRowDataBound="OnRowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="images/plus.png" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<div class="userGrid">
<asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="OrderId" HeaderText="Order Id" />
<asp:BoundField ItemStyle-Width="150px" DataField="OrderDate" HeaderText="Date" />
</Columns>
</asp:GridView>
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
</Columns>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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", "images/minus.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
});
$(document).ready(function () {
$("#<%=gvCustomers.ClientID %> tr").each(function () {
if ($(this).find('.userGrid table tr').length > 0) {
//need to set plus icon  
alert("Yes,gvOrders has row");
} else {
//need to set minus icon without click event
alert("no,gvOrders has no  row");
}
});//end of loop
});
</script>

Answer 1

你已经有一个 RowDataBound 事件了。为什么不将图像替换为图像控件。

<asp:Image ID="Image1" runat="server" ImageUrl="images/plus.png" />

然后，您可以检查嵌套的 GridView 是否有任何数据，并相应地更改 ImageUrl。然后，如果可以展开，您还可以轻松确保图像具有指针光标。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Image img = e.Row.FindControl("Image1") as Image;
if (nestedSource == 0) {
img.ImageUrl = "images/min.png";
}
else
{
img.Attributes.Add("style", "cursor:pointer");
}
}
}