文档库

最新最全的文档下载
当前位置:文档库 > GridView技巧.外观显示

GridView技巧.外观显示

GridView的主要新特性:

1.与DataSource控件结合实现了显示与数据操作的分离,大大减化了代码的编写量;

2.实现"双向绑定",无需手动检索数据。

2.在列的类型上新增了CheckBoxField和ImageField两个类型列;

3.对排序和分页可以实现异步操作;

4.对其视图状态进行优化,使其运行效率更高;

GridView与DataSource控件(案例:Default窗体)

要谈GridView就必需要谈DataSource,这两个对象可称得上是“最佳拍档”。DataSource 控件负责与数据源的交互,而GridView负责数据的显示。它们之间通过“双向绑定”联系起来,即DataSource控件将检索出来的数据绑定到GridView中显示,而GridView中修改和删除的数据直接绑定到DataSource数据源去。

这两个过程由这两个控件相互配合实现的,无需我们编写代码。如果我们只用GridView 显示数据,而不用DataSource控件的话,那你只好编写代码实现DataSource要作的工作了。

一.GridView的外观显示()

1、总体外观设置

1.通过设置属性的简单外观

属性:

allowPageing:允许分页

PageSize:每页显示的行数

HorizontalAlign:对齐方式

ControlStyle:当前列中控件的样式

HeaderStyle:当前列中页眉的样式

FooterStyle:当前列中页脚的样式

ItemStyle:当前列中数据行的样式

ReadOnly:当前列是否是只读列,编辑的时候不显示文本框

SortExpression:排序表达式,这里只填数据源的列名

Visible:当前列是否可见

HeaderText:页眉文本

FooterText:页脚文本

DataField:当前列的数据行要显示哪个字段的数据,填写字段名

DataFormatString:对显示的数据进行格式化显示

a.建Fefaultchuangti,添加GridView控件与ObjectDataSource控件

b.配ObjectDataSource控件的数据源

c.GridView控件选择数据源--ObjectDataSource1

2.直接套用样式后的外观

在GridView右上角“智能菜单中”点击"自动套用模式"-->选择模式

3. 修改RowStyle-BackColor、RowStyle-Font、RowStyle-HorizontalAlign ,HeadStyle,AlternatingRowStyle等属性后的外观

2、对绑定列进行外观设置

对上面的图我们可以看出外观方面有几个问题:

a.页眉是英文的

b.所有的数据都是居中对齐

c.price列中应加上"RMB"的符号,最好对价格列的数据以红色字体显示

d.设置时间

上面的这些问题我们可以通地单独对列进行格式设置来实现

点击GridView右上角“智能菜单中”点击“编辑列”,打开"字段"窗口:

GridView技巧.外观显示

这个图总体可以分作三大部分:可用字段,选中的字段,BoundField属性

(1)“可用字段”:显示了可供我们使用的列的类型

BoundField:绑定列,将数据库中的数据以字符形式绑定显示

CheckBoxField:复选框列,一般用来绑定数据库中的Bit型数,以复选框的形式显示在GridView中

HyperLinkField:超链接列,可以用数据源中的数据作超链接文本也可以把所有超链接文本设为统一的文本

ImageField:图片列,绑定数据源中的图片路径,并把图片显示出来

CommandField:命令列,常用的“选择”,“删除”,“编辑、更新、取消”

ButtonField:按钮列,其它做用的按钮

TemplateField:模板列,可以更灵活地自定义显示格式

(2)“选定的字段”:从“可用字段”中添加进来的,用来在GridView中显示的列。其下方有个复选框“自动生成字段”,如果选中了就会根据DataSource控件中检索出来的数据自动生成列,如果你要自己设置列的格式,请将此复选框清空。(车延禄)

(3)“BoundField属性”:设置“每个可用字段”的属性

我们可以根据自己的需要从“可用字段”中选择列添加到“选中的字段中”,然后设置BoundField属性。

在此我们先主要看BoundField列,其它类型的列后面再讲解。

BoundField中的重要属性:

ControlStyle:当前列中控件的样式

HeaderStyle:当前列中页眉的样式

FooterStyle:当前列中页脚的样式

ItemStyle:当前列中数据行的样式

ReadOnly:当前列是否是只读列,编辑的时候不显示文本框

SortExpression:排序表达式,这里只填数据源的列名

Visible:当前列是否可见

HeaderText:页眉文本

FooterText:页脚文本

DataField:当前列的数据行要显示哪个字段的数据,填写字段名

DataFormatString:对显示的数据进行格式化显示

1.BoundField:绑定列

A.更改页眉为中文--->选择绑定的字段,如:Ids列。

设置属性:DataField(Ids),HeaderText(编号)

B.设置"name"列的名称为做对齐

设置属性:ItemStyle中的HorizontalAlign属性为Center,这样只把name列的数据Center对齐

C.设置"price"列价格Right对齐,价格前加"RMB"

设置属性:1.ItemStyle中的HorizontalAlign属性为right,这样只把price列的数据右对齐

2.DataFormatString属性:RMB{0}

HtmlEncode属性:false

D.设置时间格式:(yyyy-MM--dd)

设置属性:DataFormatString属性::{0:d}

E.设置各列的列宽

ItemStyle的Width属性;如:10%

2.ImageField:图片列

A.设置图片:

设置属性:DataImageUrlField(Image),HeaderText(图片)

DataAlternateTextField:(Name)--图片上出现的提示为Name名字

注意:如果不在一个路径下:DataImageUrlFamateString: ../

注意:设置图片也可用BoundField:绑定列

1.DataField(Image),HeaderText(图片)

2.DataFormatString属性:

HtmlEncode属性:false.

注意:如果不在一个路径下:DataFormatString属性:

3、对数据行进行外观设计

对于列的设计我们可以通过可视化的界面进行设计,但是对于数据行的外观设置就没有那么简单了。由于我们不知道将来有多少行数据显示,也不知道哪一条数据显示在哪一行中,所以很难通过可视化的方式进行设置。但这并不代表我们没有办法根据绑定的数据不同设置不同行的外观。

要解决这个问题我们先来研究一下GridView的绑定数据的过程:

实际上在GridView在数据绑定的过程中是逐行实现的。是从GridView最上面的一行(页眉或上分页行)到最下面的一行(页脚或下分页行)逐行建造的。在建造每一行的过程中,又分为两步:创建行和绑定行两个步骤。下面分开说:

创建行:就是根据数据源的结构创建出n个单元格,并根据GridView的样式和BoundFField属性的样式设置好每个单元格的样式(背景色,前景色,字体等)。如果该行中有控件或静态文本(设计时已写死的文本,如页眉文本)那在创建的时候也会直接创建控件或静态文本。就像开茶馆一样,把椅子、桌子、茶杯、开水都备好了,就等客人来了(客人还没来呢,因为这只是创建行,还没有绑定行呢)。

绑定行:“创建行”执行完后,再进行“绑定行”。绑定行实际上就是把数据源中当前行的数据逐一填写到已创建好的行的相应单元格里去。绑定行执行完毕时才真正把一行数据建造完毕。这里就像把客人按排到相应的已准备好的坐位上喝茶。

在GridView绑定DataSource控件的时候实际上就是循环执行“创建行”和“绑定行”的过程。如果我们能深入到每一行的“建造”过程中去,我们就可以根据绑定出来的数据控制当前行的外观样式了。

非常幸运,GridView 为我们提供了两个事件:RowCreated和RowDataBound事件RowCreated事件:是每一行“创建行”完成时被触发的事件。

RowDataBound事件:是每一行“绑定行”完成时被触发的事件。

因此在绑定GridView显示数据过程也就是循环触发RowCreated事件和RowDataBound事件的过程。

看代码验证:

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) {

Response.Write(e.Row.RowType.ToString()+" Created=>");

}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {

Response.Write(e.Row.RowType.ToString()+" DataBound=>");

}

对数据行实现下面的控制:

1.把“上市时间”列改为"yyyy年MM月dd日"的中文格式显示

2.把价格高于50万元的高档汽车用黄色前景和红色字体显示

3.计算当前页面中所有汽车的平均价格,并显示在页脚中

解决思路:

在GridView控件的RowDataBound事件中,取得每一行中相应单元格中的数据,把数据处理,重新写回单元格中。

代码如下:

//成员变量,用来累计当前页面中所有水果的价格总和

private double _PriceSum;

protected void Page_Load(object sender, EventArgs e)

{

GridView1.ShowFooter = true; //显示页脚

}

//修改日期的显示格式

//private void ChangeDate(GridViewRowEventArgs e) //GridViewRowEventArgs e形参:这是在建造行对象时产生的事件数据,它里面包含正在建造的当前行对象的信息,通过它我们可以取得正在建造的行对象和行对象中的单元格对象,并可以取得或设置这些对象相应的属性。

//{

// if (e.Row.RowType == DataControlRowType.DataRow)

// {

// if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate)

// {

// //取出“上市时间”单元格中的日期文本

// string dt = e.Row.Cells[3].Text;

// if (dt != null && dt.Trim() != "")

// {

// //将日期转换为长日期字符串格式

// e.Row.Cells[3].Text = Convert.ToDateTime(dt).ToLongDateString();

// }

// }

// }

//}

//取出价格高于5元的水果

private void HighFuit(GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

if (e.Row.RowState == DataControlRowState.Alternate || e.Row.RowState== DataControlRowState.Normal)

{

InfoData info=DetailsView1.DataItem as InfoData; //造InfoData类型的数据:info

string p = e.Row.Cells[2].Text;

//取出来的单元格的文本带有RMB字符串,如:RMB4.4

p = p.Substring(http://www.wendangku.net/doc/f27362bdc77da26925c5b0b3.htmlstIndexOf(">") + 1); //截取出其中的价格

//p1相当于info.Price

double p1 = double.Parse(p); //价格转成Double型

if (p1 > 5.0)

{

e.Row.BackColor = System.Drawing.Color.Yellow; //使用系统预设颜色来设置行的背景色

e.Row.ForeColor = System.Drawing.Color.FromName("#ff0000"); //使用十六进制的颜色,设置前景色

}

}

}

}

//根据_PriceSum计算平均价格,并在页脚显示

private void GetAllPrice(GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow) //累加当前页中的汽车的价格总和(_PriceSum)

{

if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate)

{

string p = e.Row.Cells[2].Text;

//取出来的单元格的文本带有RMB字符串,如:RMB4.4

p = p.Substring(http://www.wendangku.net/doc/f27362bdc77da26925c5b0b3.htmlstIndexOf(">") + 1); //截取出其中的价格

double p1 = double.Parse(p); //价格转成Double型

_PriceSum += p1;

}

}

if (e.Row.RowType == DataControlRowType.Footer) //根据_PriceSum计算平均价格,并在页脚显示

{

e.Row.Cells[2].Text = "RMB" + (_PriceSum / GridView1.PageSize).ToString();

e.Row.Cells[2].HorizontalAlign = HorizontalAlign.Center;

}

}

//RowDataBound事件处理程序,调用上面的三个方法进行设置(如果上面3个方法放在GridView1_RowDataBound里,胡有点挤)

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

//ChangeDate(e);

HighFuit(e);

GetAllPrice(e);

}

注意:

在上面的函数中,有几个需要重点说明的问题:

1.GridViewRowEventArgs e形参:这是在建造行对象时产生的事件数据,它里面包含正在建造的当前行对象的信息,通过它我们可以取得正在建造的行对象和行对象中的单元格对象,并可以取得或设置这些对象相应的属性。

2.e.Row.RowType属性:(DataControlRowType枚举类型)它返回正在建造的行对象的类型(如:页眉、页脚、数据行、分页行等)

3.e.Row.RowState属性:(DataControlRowState枚举类型)它返回正在建造的行对象的状态(如:普通状态、交替状态、编辑状态、选中状态等)

下面这段代码,大家一定不能漏掉

if (e.Row.RowType == DataControlRowType.DataRow)

{

if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate)

{

}

}