ASP.net技巧：DataList、Gridview主从表明细显示 - 叶子文文

ASP.net技巧：DataList、Gridview主从表明细显示

2009-08-06 16:13:16

标签：DataList 休闲 Gridview 职场主从表

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://yeziwenwen.blog.51cto.com/872759/188602

图1.使用DataList显示主从表明细

图2.使用Gridview显示主从表明细

数据库为SQL Server实例数据库Northwind，实现按照订单编号，统计显示出订单详情。

一构建Northwind库中Orders订单表以及Order Details订单详细表在DataSet中的表关系：

public class DataAccess
{

public DataSet Tablerelation()

{

string strCon = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;

//构建连接

SqlConnection con = new SqlConnection(strCon);

//多个表来源于相同数据库我们可以讲sql语句一起书写，但需要注意的是，必须在语句间用空格隔开

SqlDataAdapter da = new SqlDataAdapter("select * from orders select * from [order details]",con);

DataSet ds = new DataSet();

da.Fill(ds);

//我们也可以修改默认生成的（Table、Table1、……）表名

ds.Tables [0].TableName="orders";

ds.Tables[1].TableName = "orderDetails";

//找到两个表中相关联的列

DataColumn father = ds.Tables["orders"].Columns["OrderID"];

DataColumn son = ds.Tables["orderDetails"].Columns["OrderID"];

//给两个列，建立名为tablerelation的关系

DataRelation r = new DataRelation("tablerelation", father, son);

//将表关系添加到数据集中

ds.Relations.Add(r);

return ds;

}
}

wef.config中的连接字符串为：

</connectionStrings>

接下来我们来布置控件的界面：

一DataList:

给DataList1的项中添加一个一行二列的表，第一个单元格中绑定订单编号，第二个单元格中再加入一个DataList2作为此订单编号的订单详细，在DataList2的项中添加一个一行四列的表，单元格中绑定订单详细表中的字段名。给DataList1的头模版中加入一个一行五列的表，分别写入图片所示的列说明，布局源码如下：

<asp:DataList ID="DataList1" runat="server" BackColor="White"

BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3"

GridLines="Both">

<tr>

订单编号</td>

商品编号</td>

单价</td>

数量</td>

折扣</td>

</tr>

</table>

</HeaderTemplate>

<tr>

<%#Eval("OrderID") %></td>

<td>

<asp:DataList ID="DataList2" runat="server"

DataSource ='<%# ((System.Data.DataRowView)Container.DataItem).CreateChildView("tablerelation") %>'

Width ="100%" BackColor="White" BorderColor="#CC9966" BorderStyle="None"

BorderWidth="1px" CellPadding="4" GridLines="Both">

<tr>

<%#Eval("productID") %></td>

<%#Eval("Unitprice") %></td>

<%#Eval("Quantity") %></td>

<%#Eval("Discount") %></td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

</td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

其中用黄色背景加粗显示的为DataList2的数据源将是根据该项中的订单编号，在表关系名“tablerelation”中找到对应的订单详情，创建一个视图。

DataList1的数据源将绑定我们以及构建好的DataSet，代码如下：

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

Bind();

}

//绑定控件显示

void Bind()

{

DataAccess da = new DataAccess();

DataSet ds = da.Tablerelation();

DataList1.DataSource = ds.Tables[0];

DataList1.DataBind();

GridView2.DataSource = ds.Tables[0];

GridView2.DataBind();

}

二、使用Gridview的方式类似，首先将Gridview2的自动生成列AutoGenerateColumns="False"改为false，然后在Gridview2手动加入自定义项TemplateField中编辑模版，加入二行一列的表格，第一行绑定订单编号，第二行加入Gridview3，用于显示订单明细，自动生成列AutoGenerateColumns="False"改为false,加入自定义绑定的四个项目，如 <asp:BoundField DataField="productID" HeaderText="商品编号" />，源码如下：

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"

CellPadding="4" ForeColor="#333333" GridLines="None" >

<asp:TemplateField>

<tr>

<td>

订单编号： <%#Eval("OrderID") %></td>

</tr>

<tr>

<td>

<asp:GridView ID="GridView3" runat="server" DataSource ='<%# ((System.Data.DataRowView)Container.DataItem).CreateChildView("order") %>' DataMember="orderID" AutoGenerateColumns="False">

<asp:BoundField DataField="productID" HeaderText="商品编号" />

<asp:BoundField DataField="Unitprice" HeaderText="商品单价" />

<asp:BoundField DataField="Quantity" HeaderText="商品数量" />

<asp:BoundField DataField="Discount" HeaderText="折扣" />

</Columns>

</asp:GridView>

</td>

</tr>

</table>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

Gridview3的数据源的绑定方式如上原理。

本文出自 “叶子文文” 博客，请务必保留此出处http://yeziwenwen.blog.51cto.com/872759/188602

0人

了这篇文章

类别：ASP.Net技巧┆技术圈()┆阅读()┆评论() ┆ 推送到技术圈┆返回首页

上一篇（教学思路 HTML二）页面的文字布局和文字效果下一篇 SQL报错：no description found

叶子文文

叶子文文的BLOG

博客统计信息

热门文章

搜索BLOG文章

我的技术圈(0)

最近访客

最新评论

51CTO推荐博文

相关文章

文章评论

发表评论

叶子文文

叶子文文 的BLOG

博客统计信息

热门文章

搜索BLOG文章

我的技术圈(0)

最近访客

最新评论

51CTO推荐博文

友情链接

相关文章

文章评论

发表评论

叶子文文的BLOG