Question

我正在使用嵌套GridView。如何仅使用div标签和任何其他控件来实现嵌套GridView功能？

Javascript是

 <script language="javascript" type="text/javascript">
function divexpandcollapse(divname) {
var div = document.getElementById(divname);
var img = document.getElementById('img' + divname);
if (div.style.display == "none") {
div.style.display = "inline";
img.src = "minus.gif";
} else {
div.style.display = "none";
img.src = "plus.gif";
}
}
</script>

并且aspx包含两个gridview（带有嵌套的gridviews）作为

      <div>
    <asp:GridView ID="gvParentGrid" runat="server" DataKeyNames="CountryId" Width="300"
    AutoGenerateColumns="false" OnRowDataBound="gvUserInfo_RowDataBound" GridLines="None" BorderStyle="Solid" BorderWidth="1px"  BorderColor="#df5015">
    <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
    <RowStyle BackColor="#E1E1E1" />
    <AlternatingRowStyle BackColor="White" />
    <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
    <Columns>
    <asp:TemplateField ItemStyle-Width="20px">
    <ItemTemplate>
    <a href="JavaScript:divexpandcollapse('div<%# Eval("CountryID") %>');">
    <img id="imgdiv<%# Eval("CountryID") %>" width="9px" border="0" src="plus.gif" />
    </a>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="CountryId" HeaderText="CountryId" HeaderStyle-HorizontalAlign="Left" />
    <asp:BoundField DataField="CountryName" HeaderText="CountryName" HeaderStyle-HorizontalAlign="Left" />
    <asp:TemplateField>
    <ItemTemplate>
    <tr>
    <td colspan="100%">
    <div id="div<%# Eval("CountryID") %>" style="display: none; position: relative; left: 15px; overflow: auto">
    <asp:GridView ID="gvChildGrid" runat="server" AutoGenerateColumns="false" BorderStyle="Double"  BorderColor="#df5015" GridLines="None" Width="250px">
    <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="StateID" HeaderText="StateID" HeaderStyle-HorizontalAlign="Left" />
    <asp:BoundField DataField="StateName" HeaderText="StateName" HeaderStyle-HorizontalAlign="Left" />
    </Columns>
    </asp:GridView>
    </div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>

背后的代码是

 protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
// This method is used to bind gridview from database
protected void BindGridview()
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from Country", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
gvParentGrid.DataSource = ds;
gvParentGrid.DataBind();

}
protected void gvUserInfo_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
con.Open();
GridView gv = (GridView)e.Row.FindControl("gvChildGrid");
int CountryId = Convert.ToInt32(e.Row.Cells[1].Text);
SqlCommand cmd = new SqlCommand("select * from State where CountryID=" + CountryId, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
gv.DataSource = ds;
gv.DataBind();
}

Answer 1

编辑：

您可以使用嵌套中继器。在外转发器中，您必须添加两个转发器，一个用于ItemTemplate，另一个用于AlternatingItemTemplate。您的标记可能如下所示：

<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function divexpandcollapse(divname) {
            var div = document.getElementById(divname);
            var img = document.getElementById('img' + divname);
            if (div.style.display == "none") {
                div.style.display = "inline";
                img.src = "minus.gif";
            } else {
                div.style.display = "none";
                img.src = "plus.gif";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <div>
                <asp:Repeater ID="rptCountry" runat="server" OnItemDataBound="rptCountry_ItemDataBound">
                    <HeaderTemplate>
                        <table style="border: 1px double #df5015" width="300">
                            <tr>
                                <th style="background-color: #df5015; font-weight: bold; color: white"></th>
                                <th style="background-color: #df5015; font-weight: bold; color: white">CountryId</th>
                                <th style="background-color: #df5015; font-weight: bold; color: white">CountryName</th>
                            </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr style="background-color: #E1E1E1">
                            <td style="width: 20px">
                                <a href="JavaScript:divexpandcollapse('div<%# Eval("CountryID") %>');">
                                    <img id='imgdiv<%# Eval("CountryID") %>' width="9px" border="0" src="plus.gif" />
                                </a>
                            </td>
                            <td><%#Eval("CountryID") %></td>
                            <td><%#Eval("CountryName") %></td>
                        </tr>
                        <tr style="background-color: #E1E1E1">
                            <td colspan="3">
                                <asp:HiddenField ID="hdnCountryID" runat="server" Value='<%#Eval("CountryID") %>' />
                                <div id='div<%# Eval("CountryID") %>' style="display: none; position: relative; left: 15px; overflow: auto">
                                    <asp:Repeater ID="rptState" runat="server">
                                        <HeaderTemplate>
                                            <table style="border: 1px double #df5015" width="250">
                                                <tr>
                                                    <th style="background-color: black; font-weight: bold; color: white">StateID</th>
                                                    <th style="background-color: black; font-weight: bold; color: white">StateName</th>
                                                </tr>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <tr style="background-color: #E1E1E1">
                                                <td><%#Eval("StateID") %></td>
                                                <td><%#Eval("StateName") %></td>
                                            </tr>
                                        </ItemTemplate>
                                        <AlternatingItemTemplate>
                                            <tr style="background-color: White">
                                                <td><%#Eval("StateID") %></td>
                                                <td><%#Eval("StateName") %></td>
                                            </tr>
                                        </AlternatingItemTemplate>
                                        <FooterTemplate>
                                            </table>
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </div>
                            </td>
                        </tr>
                    </ItemTemplate>
                    <AlternatingItemTemplate>
                        <tr style="background-color: white">
                            <td style="width: 20px">
                                <a href="JavaScript:divexpandcollapse('div<%# Eval("CountryID") %>');">
                                    <img id='imgdiv<%# Eval("CountryID") %>' width="9px" border="0" src="plus.gif" />
                                </a>
                            </td>
                            <td><%#Eval("CountryID") %></td>
                            <td><%#Eval("CountryName") %></td>
                        </tr>
                        <tr style="background-color: white">
                            <td colspan="3">
                                <asp:HiddenField ID="hdnCountryID" runat="server" Value='<%#Eval("CountryID") %>' />
                                <div id='div<%# Eval("CountryID") %>' style="display: none; position: relative; left: 15px; overflow: auto">
                                    <asp:Repeater ID="rptState" runat="server">
                                        <HeaderTemplate>
                                            <table style="border: 1px double #df5015" width="250">
                                                <tr>
                                                    <th style="background-color: black; font-weight: bold; color: white">StateID</th>
                                                    <th style="background-color: black; font-weight: bold; color: white">StateName</th>
                                                </tr>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <tr style="background-color: #E1E1E1">
                                                <td><%#Eval("StateID") %></td>
                                                <td><%#Eval("StateName") %></td>
                                            </tr>
                                        </ItemTemplate>
                                        <AlternatingItemTemplate>
                                            <tr style="background-color: White">
                                                <td><%#Eval("StateID") %></td>
                                                <td><%#Eval("StateName") %></td>
                                            </tr>
                                        </AlternatingItemTemplate>
                                        <FooterTemplate>
                                            </table>
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </div>
                            </td>
                        </tr>
                    </AlternatingItemTemplate>
                    <FooterTemplate></table></FooterTemplate>
                </asp:Repeater>
            </div>
    </form>
</body>

代码：

//Change the connection string with yours
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["SOConnectionString1"].ToString());
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindRepeater();
    }
}

// This method is used to bind gridview from database
protected void BindRepeater()
{
    con.Open();
    SqlCommand cmd = new SqlCommand("select * from Country", con);
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    da.Fill(ds);
    con.Close();
    rptCountry.DataSource = ds;
    rptCountry.DataBind();

}
protected void rptCountry_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {

        var rptState = e.Item.FindControl("rptState") as Repeater ;
        var hdnCountryID = e.Item.FindControl("hdnCountryID") as HiddenField ;
        int countryId = 0;
        DataSet ds = new DataSet();

        if (rptState != null && hdnCountryID != null && int.TryParse(hdnCountryID.Value, out countryId))
        {
            con.Open();
            SqlCommand cmd = new SqlCommand("select * from State where CountryID=" + countryId, con);
            SqlDataAdapter da = new SqlDataAdapter(cmd);

            da.Fill(ds);
            con.Close();
        }

        rptState.DataSource = ds;
        rptState.DataBind();

    }
}

这是结果：

enter image description here

如何使用asp.net中div标签中的任何其他控件实现嵌套GridView功能

1 个答案:

编辑：