[原创]ExtAspNet秘密花园（十五）

[原创]ExtAspNet秘密花园（十五） — 表格概述

阅读量：6682 次

发布时间：2019-06-25

本文共 6560 字，大约阅读时间需要 21 分钟。

ExtAspNet的一大特色就是简单易学，这一设计理念不仅指导ExtAspNet控件在命名上和AspNet原生控件保持一致，而且在编程习惯、事件方法命名、甚至是扩展属性方法都尽量保持了AspNet的控件风格。从本章对ExtAspNet的Grid控件和AspNet的GridView的对比中，你会清晰地看到这一点。同时ExtAspNet的Grid还对AspNet的GridView进行了非常多并且有用的扩展，在接下来的几篇文章中，我们会详细讲解。

准备数据

提供给Grid的数据一般是两类，分别是数据表格和列表数据。在整个Grid控件的示例中，我们大部分时间都用到了硬编码的表格数据（用来模拟数据库查询的返回值），下面就来看下这个表格数据的定义：

1:  protected DataTable GetDataTable()

2:  {

3:      DataTable table = new DataTable();

4:      table.Columns.Add(new DataColumn("Id", typeof(int)));

5:      table.Columns.Add(new DataColumn("Name", typeof(String)));

6:      table.Columns.Add(new DataColumn("EntranceYear", typeof(String)));

7:      table.Columns.Add(new DataColumn("AtSchool", typeof(bool)));

8:      table.Columns.Add(new DataColumn("Major", typeof(String)));

9:      table.Columns.Add(new DataColumn("Group", typeof(int)));

10:      table.Columns.Add(new DataColumn("Gender", typeof(int)));

11:      table.Columns.Add(new DataColumn("LogTime", typeof(DateTime)));

12:      table.Columns.Add(new DataColumn("Desc", typeof(string)));

13:      table.Columns.Add(new DataColumn("Guid", typeof(Guid)));

14:

15:      DataRow row = table.NewRow();

16:

17:      row[0] = 101;

18:      row[1] = "陈萍萍";

19:      row[2] = "2000";

20:      row[3] = true;

21:      row[4] = "计算机应用技术";

22:      row[5] = 1;

23:      row[6] = 0;

24:      row[7] = DateTime.Now.AddDays(-100);

25:      row[8] = "陈萍萍，女，20岁，出生于中国南方的一个小山村，毕业于中国科学技术大学。";

26:      row[9] = new Guid();

27:      table.Rows.Add(row);

28:

29:      row = table.NewRow();

30:      row[0] = 102;

31:      row[1] = "胡飞";

32:      row[2] = "2008";

33:      row[3] = false;

34:      row[4] = "信息工程";

35:      row[5] = 1;

36:      row[6] = 1;

37:      row[7] = DateTime.Now.AddDays(-90);

38:      row[8] = "胡飞，男，20岁，出生于中国北方的一个小山村，毕业于南方科学技术大学。";

39:      row[9] = new Guid();

40:      table.Rows.Add(row);

41:

42:      row = table.NewRow();

43:      row[0] = 103;

44:      row[1] = "金婷婷";

45:      row[2] = "2001";

46:      row[3] = true;

47:      row[4] = "会计学";

48:      row[5] = 2;

49:      row[6] = 0;

50:      row[7] = DateTime.Now.AddDays(-80);

51:      row[8] = "金婷婷，女，28岁，出生于中国海南岛的一个小山村，毕业于中国科学技术大学。";

52:      row[9] = new Guid();

53:      table.Rows.Add(row);

54:

55:      return table;

56:  }

这个函数定义在页面基类中，所以我们可以很方便的在每个页面中调用此函数来初始化数据表格。

AspNet原生的GridView

首先来看下在AspNet中，如何使用数据绑定原生的GridView控件：

1:

2:      runat="server">

3:

4:

5:

6:

7:

8:

9:

10:

11:

12:

13:

14:

15:

16:

17:

18:              DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"

19:              Target="_blank" />

20:

21:              HeaderText="分组">

22:

23:

24:

这里用到了模板列、数据绑定列、复选框列、超链接列以及图片列，相信大家都不会陌生。

同时在页面后台代码中，如下初始化表格：

1:  protected void Page_Load(object sender, EventArgs e)

2:  {

3:      if (!IsPostBack)

4:      {

5:          BindGrid();

6:      }

7:  }

8:

9:  private void BindGrid()

10:  {

11:      DataTable table = GetDataTable();

12:

13:      GridView1.DataSource = table;

14:      GridView1.DataBind();

15:  }

生成的界面如下所示：

使用ExtAspNet的Grid控件实现类似的界面

ExtAspNet的Grid控件实现类似的界面，其代码几乎一模一样，只不过是把ASPX标签中的asp:前缀改成了ext:。

不相信？一起来看看：

1:

2:      runat="server" DataKeyNames="Guid">

3:

4:

5:

6:

7:

8:

9:

10:

11:

12:

13:

14:

15:

16:

17:

18:              DataTextFormatString="{0}" DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"

19:              DataNavigateUrlFieldsEncode="true" Target="_blank" ExpandUnusedSpace="True" />

20:

21:              HeaderText="分组">

22:

23:              HeaderText="注册日期" />

24:

25:

后台初始化代码更是一模一样（除了表格ID）：

1:  protected void Page_Load(object sender, EventArgs e)

2:  {

3:      if (!IsPostBack)

4:      {

5:          BindGrid();

6:      }

7:  }

8:

9:  private void BindGrid()

10:  {

11:      DataTable table = GetDataTable();

12:

13:      Grid1.DataSource = table;

14:      Grid1.DataBind();

15:  }

再来看先现在漂亮的界面吧：

由此不仅不让人感概，既然相同的代码就能换来漂亮的脸蛋，我们又何乐而不为呢？

不仅如此，此时的Grid也自动拥有了原生Ajax的能力，在以后的篇幅中你会发现，完全相同的代码实现，现在的翻页、排序、行内事件都是Ajax了！

在这个例子中，还有两个小技巧：

所学专业那一列的ExpandUnusedSpace属性用来控制此列充满所有的剩余空间，并且随着表格宽度变化而变化。

所学专业那一列的DataToolTipField属性用来显示一个提示消息，在本列宽度不足时可以帮我们一个大忙，不信改变一下此列的大小看看。

固定列宽度和列宽度自适应

ExtAspNet的表格控件对列宽度的控制有两种方式。

固定列宽度

这种方式就是前面看到的示例，我们之所以称其为固定列宽度方式，是因为除了自动扩展宽度列之外，所有的其他列宽度都是固定的。再来看下简化后的ASPX代码：

1:

2:

3:

4:

5:

6:

7:

8:

9:

10:

11:

12:

本例中只有“所学专业”列没有设置宽度，并且设置ExpandUnusedSpace=true，这就意味着本列会占据所有的剩余宽度，本例中也就是：

800-60-100-60-60-60-60-100 = 300px

如果设置表格的宽度为900px，则“所学专业”列的宽度就变成了400px。

列宽度自适应

有时我们希望各列的宽度都能根据表格的宽度自动调整，此时就要用到列宽度自适应模式了，其典型的ASPX标签结构如下：

1:

2:

3:

4:

5:

6:

7:

8:

9:

10:

11:

12:

有两个关键点：

为表格增加属性ForceFitAllTime=true；

为每列设置固定宽度。

特别注意，这里的固定宽度其实不是真的固定宽度，它仅仅代表了与其他列宽度的相对值，这也有助于我们在两种模式之间方便的切换。

我们看下在这种情况下“所学专业”列所占据的宽度：

800 * ( 300 / (50+100+50+50+50+300+100+100) ) = 800 * ( 3 / 8 ) = 300px

如果设置表格的宽度为1200px，则“所学专业”列的宽度就变成了450px；而此时“注册日期”列变成了150px。

表格控件有哪些列类型

从ExtAspNet中，我们不难看出所有的列都继承自GridColumn类，如下图所示：

其中，BoundField、CheckBoxField、HyperLinkField、ImageField、TemplateField是AspNet原生的GridView控件也有的，只不过ExtAspNet对部分功能又做了增强，比如CheckBoxField不仅可以用来显示静态的图片，也可以用来显示一个可编辑的复选框。

另外两种类型的列LinkButtonField和WindowField则是ExtAspNet的扩展，特别是WindowField列配置Window控件使用可以方便的实现在弹出窗口中编辑行数据的功能。

当然对这些具体列的使用会有专门的章节讨论，这里我们还是先看下基类GridColumn包含了哪些信息：