asp.net利用GridView"表中表"实现主从表数据

最新推荐文章于 2015-09-29 10:12:31 发布

暖枫无敌

最新推荐文章于 2015-09-29 10:12:31 发布

阅读量6k

点赞数

分类专栏： C#.NET编程 asp.net 应用开发文章标签： asp server string object image

本文链接：https://blog.csdn.net/zdw_wym/article/details/4716576

版权

C#.NET编程同时被 2 个专栏收录

219 篇文章 2 订阅

订阅专栏

asp.net 应用开发

79 篇文章 29 订阅

订阅专栏

在模板容器中，放置GridView控件，形成"表中表"的效果，这样可以实现各种复杂的表格效果,下面介绍的"表中表"最适合显示主从表中的数据。

新建一个ASp.NET网站，在Default.aspx页面中添加如下代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>GridView显示主从表数据</title>
    <style type="text/css">
        .PlusMouse{cursor:pointer;}
        .Show{display:block;}
        .Hide{display:none;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="false" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <div>
                            <asp:ImageButton ID="imgPlus" runat="server" ImageUrl="~/images/plus.gif" CssClass="PlusMouse" />
                            <asp:Label ID="lblName" runat="server" Text=""></asp:Label>
                        </div>
                        <asp:Panel ID="panelOrder" runat="server" CssClass="Hide" HorizontalAlign="right">
                            <asp:GridView ID="gvOrder" runat="server" AutoGenerateColumns="false" OnRowDataBound="gvOrder_RowDataBound">
                                <Columns>
                                    <asp:TemplateField HeaderText="">
                                        <ItemTemplate>
                                            <asp:Image ID="imgShipState" runat="server" />
                                        </ItemTemplate>
                                        <ItemStyle Width="20px" />
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="OrderID" HeaderText="订单ID">
                                        <ItemStyle Width="60px" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="CompanyName" HeaderText="顾客公司">
                                        <ItemStyle Width="150px" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="OrderDate" DataFormatString="{0:yyyy-MM-dd}" HeaderText="订货日期">
                                        <ItemStyle Width="150px" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="ProductName" HeaderText="产品名称">
                                        <ItemStyle Width="300" />
                                    </asp:BoundField>
                                </Columns>
                            </asp:GridView>
                        </asp:Panel>
                    </ItemTemplate>
                    <ItemStyle Width="700px" />
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

在Default.aspx.cs文件中添加如下代码：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
private string conString = System.Configuration.ConfigurationManager.AppSettings["ConnectionString"];

    protected void Page_Load(object sender, EventArgs e)
    {
        BindEmployee();
    }

    //获取一个DataTable
    private DataTable GetDataTable(string strSQL)
    {
        SqlConnection con = new SqlConnection(conString);
        con.Open();
        SqlDataAdapter da = new SqlDataAdapter(strSQL,con);
        DataTable dt = new DataTable();
        da.Fill(dt);
        con.Close();
        return dt;
    }

    private void BindEmployee()
    {
        string strSQL = "select * from Employees";
        this.GridView1.DataSource = this.GetDataTable(strSQL);
        this.GridView1.DataBind();
    }

    private void BindGridOrder(string EmployeeID, GridView gv)
    {
        StringBuilder strSQL = new StringBuilder();
        strSQL.Append("select top 5 t1.OrderID,t1.OrderDate,t1.RequiredDate,t1.ShippedDate,t2.CompanyName,t4.ProductName ");
        strSQL.Append(" from Orders t1 ");
        strSQL.Append(" left join Customers t2 on t1.CustomerID=t2.CustomerID ");
        strSQL.Append(" left join [Order Details] t3 on t1.OrderID = t3.OrderID ");
        strSQL.Append(" left join Products t4 on t3.ProductID = t4.ProductID ");
        strSQL.AppendFormat(" where t1.EmployeeID='{0}'", EmployeeID);
        gv.DataSource = this.GetDataTable(strSQL.ToString());
        gv.DataBind();
    }

    //主表的数据绑定
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType != DataControlRowType.DataRow)
            return;
        DataRowView drv = (DataRowView)e.Row.DataItem;
        Label lblName = (Label)e.Row.FindControl("lblName");
        lblName.Text = drv["TitleOfCourtesy"].ToString() + drv["FirstName"].ToString();

        string pid = e.Row.FindControl("panelOrder").ClientID;
        ImageButton imgPlus = (ImageButton)e.Row.FindControl("imgPlus");
        imgPlus.Attributes.Add("bz","0");
        imgPlus.OnClientClick = "if(this.bz=='0'){ document.getElementById('"+pid+"').className='Show';this.bz='1';}else{ document.getElementById('"+pid+"').className='Hide';this.bz='0';}return false;";
        GridView gv = (GridView)e.Row.FindControl("gvOrder");
        this.BindGridOrder(drv["EmployeeID"].ToString(), gv);
    }

    //从表的数据绑定
    protected void gvOrder_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType != DataControlRowType.DataRow)
            return;
        DataRowView drv = (DataRowView)e.Row.DataItem;
        DateTime requiredDate = DateTime.Parse(drv["RequiredDate"].ToString());
        DateTime shippedDate = requiredDate;
        try
        {
            shippedDate = DateTime.Parse(drv["ShippedDate"].ToString());
        }
        catch
        {

        }
        int days = requiredDate.Subtract(shippedDate).Days;
        Image imgState = (Image)e.Row.FindControl("imgShipState");
        if (days < 10)
        {
            imgState.ImageUrl = "./images/1.gif";
        }
        else if (days < 20)
        {
            imgState.ImageUrl = "./images/2.gif";
        }
        else
        {
            imgState.ImageUrl = "./images/3.gif";
        }
    }

}
页面显示效果如下:

暖枫无敌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
asp.net利用GridView"表中表"实现主从表数据

在模板容器中，放置GridView控件，形成"表中表"的效果，这样可以实现各种复杂的表格效果,下面介绍的"表中表"最适合显示主从表中的数据。新建一个ASp.NET网站，在Default.aspx页面中添加如下代码:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.or
复制链接

扫一扫