[转]Gridview空数据的时候显示表头
1.前言
做前几个项目时,当对 GridView 控件进行数据绑定时,如果绑定的记录为空,网页上就不显示 GridView,原来只是简单的在Gridview的属性中把 EmptyDataText="Data is empty" 设置一下。感觉还是不理想.下面讨论的方法可以让 GridView 在没有数据记录的时候显示表的字段结构和显示提示信息.(其实看了好多方法大致意思都是一样的,当数据为空时生成一个只有表头列的空表,然后以生成的表为 GridView的数据源)
2.数据 为了让 GridView 显示数据,在数据库中建立表 temple,其字段如下: temple 表示庙宇,它的字段有: temple_id int temple_name varchar(50) location varchar(50) build_date datetime
temple 的数据为:
temple_id
|
temple_name
|
location
|
build_time
|
1
|
少林寺
|
河南省登封市嵩山
|
1900-2-2 0:00:00
|
2
|
大杰寺
|
五龙山
|
1933-2-3 3:03:03
|
3
|
法源寺
|
宣武门外教子胡同南端东侧
|
1941-2-3 5:04:03
|
4
|
广济寺
|
阜成门内大街东口
|
1950-3-3 3:03:03
|
5
|
碧云寺
|
香山东麓
|
1963-3-3 3:03:03
|
3.页面 建立一个 asp.net 网站工程,在页面中添加 GridView 和几个按钮,代码如下所示: <%@ 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> </head> <body> <form id="form1" runat="server"> <div style="font-size:13px;"> <asp:GridView ID="GridViewEmptyDataTest" runat="server" AutoGenerateColumns="False" EmptyDataText="Data Is Empty" BackColor="White" BorderColor="LightGray" BorderStyle="Double" BorderWidth="3px" CellPadding="4" GridLines="Horizontal" Width="500px"> <Columns> <asp:BoundField DataField="temple_id" HeaderText="temple_id" Visible="False" > </asp:BoundField> <asp:BoundField DataField="temple_name" HeaderText="名称" > <ItemStyle BorderColor="LightGray" BorderStyle="Double" BorderWidth="1px" Width="100px" /> </asp:BoundField> <asp:BoundField DataField="location" HeaderText="地址" > <ItemStyle BorderColor="LightGray" BorderStyle="Double" BorderWidth="1px" Width="300px" /> </asp:BoundField> <asp:BoundField DataField="build_date" HeaderText="建设时间" > <ItemStyle BorderColor="LightGray" BorderStyle="Double" BorderWidth="1px" Width="100px" /> </asp:BoundField> </Columns> <FooterStyle BackColor="White" ForeColor="#333333" /> <RowStyle BackColor="White" ForeColor="#333333" /> <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" /> <HeaderStyle BackColor="CornflowerBlue" Font-Bold="True" ForeColor="White" /> </asp:GridView> <br /> <asp:Button ID="ButtonHasDataBind" runat="server" Text="有数据绑定" Width="109px" OnClick="ButtonHasDataBind_Click" /> <asp:Button ID="ButtonQueryEmptyBind" runat="server" Text="查询结果为空绑定" Width="142px" OnClick="ButtonQueryEmptyBind_Click" /> <asp:Button ID="ButtonConstructTableBind" runat="server" Text="构造空的DataTable绑定" Width="164px" OnClick="ButtonConstructTableBind_Click" /> <asp:Button ID="ButtonNormalBind" runat="server" Text="普通空数据绑定" Width="127px" OnClick="ButtonNormalBind_Click" /></div> </form> </body> </html> GridView 要绑定的字段和 temple 的字段一样,在这里我们利用 GridView 原有的功能,设定当数据为空是显示“Data Is Empty”,如果没有设定 EmptyDataText 属性,当绑定的记录为空时,GridView 将不在页面显示。 4.数据显示 4.1普通空记录显示 编写 ButtonNormalBind 的事件函数 ButtonNormalBind_Click,添加如下代码,来测试没有经过处理的 GridView 显示情况: protected void ButtonNormalBind_Click(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.Columns.Add("temple_id"); dt.Columns.Add("temple_name"); dt.Columns.Add("location"); dt.Columns.Add("build_date"); this.GridViewEmptyDataTest.DataSource = dt; this.GridViewEmptyDataTest.DataBind(); } 执行这些代码后,GridView 显示结果如下图所示: 可以看到这样简单的提示看不出 GridView 的结构来,在大多数的实际应用中我们希望看到GridView 到底有哪些字段。 4.2增加空行来显示 GridView 的结构 我们知道只要 GridView 绑定的 DataTable 有一行记录,GridView 就会显示表头,所以当 DataTable 为空时我们增加一个空行从而显示表头。 我们把代码改成如下所示: DataTable dt = new DataTable(); dt.Columns.Add("temple_id"); dt.Columns.Add("temple_name"); dt.Columns.Add("location"); dt.Columns.Add("build_date"); if (dt.Rows.Count == 0) { dt.Rows.Add(dt.NewRow()); } this.GridViewEmptyDataTest.DataSource = dt; this.GridViewEmptyDataTest.DataBind(); 在每次绑定前判断,如果为空就增加一空行,这样绑定的结果如下图所示:
可以看得表头已经可以显示了,但是显示的空行没有任何数据也让人费解,可不可以增加一下提示信息呢? 4.3增加空记录提示 我们在数据绑定后增加一些代码对GridView进行一下处理,让显示结果更友好。在this.GridViewEmptyDataTest.DataBind();后面增加代码如下所示: int columnCount = dt.Columns.Count; GridViewEmptyDataTest.Rows[0].Cells.Clear(); GridViewEmptyDataTest.Rows[0].Cells.Add(new TableCell()); GridViewEmptyDataTest.Rows[0].Cells[0].ColumnSpan = columnCount; GridViewEmptyDataTest.Rows[0].Cells[0].Text = "没有记录"; GridViewEmptyDataTest.Rows[0].Cells[0].Style.Add("text-align", "center"); 改良后的显示结果如下图所示:
看来显示结果已经达到了我们的要求,但是当页面上有其他按钮操作导致页面 PostBack 时,页面再次显示确没有了提示信息变成如下图所示的样子:
这并不是我们想要的。 4.4防止 PostBack 时页面显示变化 为了防止显示改变我们在Page_Load事件里添加如下代码,从而重新绑定GridView: if (IsPostBack) { //如果数据为空则重新构造Gridview if (GridViewEmptyDataTest.Rows.Count == 1 && GridViewEmptyDataTest.Rows[0].Cells[0].Text == "没有记录") { int columnCount = GridViewEmptyDataTest.Columns.Count; GridViewEmptyDataTest.Rows[0].Cells.Clear(); GridViewEmptyDataTest.Rows[0].Cells.Add(new TableCell()); GridViewEmptyDataTest.Rows[0].Cells[0].ColumnSpan = columnCount; GridViewEmptyDataTest.Rows[0].Cells[0].Text = "没有记录"; GridViewEmptyDataTest.Rows[0].Cells[0].Style.Add("text-align", "center"); } } 这下我们的控件终于可以按我们的要求显示了,但是为了代码的重用,当一个项目里有多个 GridView 时,避免充分些相同的代码,我们需要把代码封装成类,从而让所有的 GridView 数据绑定时都可以轻易地实现我们的要求。 4.5封装 类的封装代码如下所示: using System.Data; using System.Web.UI.WebControls; ///<summary> /// Gridview绑定的数据记录为空时显示Gridview的表头,并显示没有记录的提示 ///</summary> public class GridviewControl { //当Gridview数据为空时显示的信息 private static string EmptyText = "没有记录"; public GridviewControl() { } ///<summary> ///防止PostBack后Gridview不能显示 ///</summary> ///<param name="gridview"></param> public static void ResetGridView(GridView gridview) { //如果数据为空则重新构造Gridview if (gridview.Rows.Count == 1 && gridview.Rows[0].Cells[0].Text == EmptyText) { int columnCount = gridview.Columns.Count; gridview.Rows[0].Cells.Clear(); gridview.Rows[0].Cells.Add(new TableCell()); gridview.Rows[0].Cells[0].ColumnSpan = columnCount; gridview.Rows[0].Cells[0].Text = EmptyText; gridview.Rows[0].Cells[0].Style.Add("text-align", "center"); } } ///<summary> ///绑定数据到GridView,当表格数据为空时显示表头 ///</summary> ///<param name="gridview"></param> ///<param name="table"></param> public static void GridViewDataBind(GridView gridview, DataTable table) { //记录为空重新构造Gridview if (table.Rows.Count == 0) { table = table.Clone(); table.Rows.Add(table.NewRow()); gridview.DataSource = table; gridview.DataBind(); int columnCount = table.Columns.Count; gridview.Rows[0].Cells.Clear(); gridview.Rows[0].Cells.Add(new TableCell()); gridview.Rows[0].Cells[0].ColumnSpan = columnCount; gridview.Rows[0].Cells[0].Text = EmptyText; gridview.Rows[0].Cells[0].Style.Add("text-align", "center"); } else { //数据不为空直接绑定 gridview.DataSource = table; gridview.DataBind(); } //重新绑定取消选择 gridview.SelectedIndex = -1; } } 你可以把这个类编译成 DLL,让各个地方调用。 4.6使用示例 这个类的使用很简单,就是在每次进行数据绑定是调用 GridViewDataBind,这个函数的第一个参数是要绑定数据的 GridView 第二个参数是包含数据字段列的 DataTable,可能为空可能不空,如果数据不空,函数则自动进行正常绑定,否则显示“没有记录”的提示。 上面的按钮事件的代码可以改成如下所示: DataTable dt = new DataTable(); dt.Columns.Add("temple_id"); dt.Columns.Add("temple_name"); dt.Columns.Add("location"); dt.Columns.Add("build_date"); GridviewControl.GridViewDataBind(this.GridViewEmptyDataTest, dt); 最后在 Page_Load 中对本页面所有 GridView 调用 ResetGridView 函数,如下所示: if (IsPostBack) { GridviewControl.ResetGridView(this.GridViewEmptyDataTest); }
|
http://apps.hi.baidu.com/share/detail/4781288