Question

我在带有扩展和折叠功能的gridview中有一个Gridview。我已遵循此link来实现这一目标。最初，gridview显示一个加号图标，如果用户单击它，它将变成减号图标，并显示嵌套的gridview。现在，如果嵌套的Gridview中没有数据，我想将初始图标设置为减号。单击此减号图标时什么也不会发生。如果嵌套的gridview上有数据，则它应该像现在一样正常。

<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");
        }
    }
}

具有扩展和折叠功能的嵌套GridView-ASP.NET C＃

1 个答案: