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

[原创]ExtAspNet秘密花园（十五） — 表格概述
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:  <asp:GridView ID="GridView1" Width="800px" DataKeyNames="Id,Name" AutoGenerateColumns="False"
```
```
   2:      runat="server">
```
```
   3:      <Columns>
```
```
   4:          <asp:TemplateField>
```
```
   5:              <ItemTemplate>
```
```
   6:                  <asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
```
```
   7:              </ItemTemplate>
```
```
   8:          </asp:TemplateField>
```
```
   9:          <asp:BoundField DataField="Name" HeaderText="姓名" />
```
```
  10:          <asp:TemplateField HeaderText="性别">
```
```
  11:              <ItemTemplate>
```
```
  12:                  <asp:Label ID="Label2" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
```
```
  13:              </ItemTemplate>
```
```
  14:          </asp:TemplateField>
```
```
  15:          <asp:BoundField DataField="EntranceYear" HeaderText="入学年份" />
```
```
  16:          <asp:CheckBoxField DataField="AtSchool" HeaderText="是否在校" />
```
```
  17:          <asp:HyperLinkField HeaderText="所学专业" DataTextField="Major" DataTextFormatString="{0}"
```
```
  18:              DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"
```
```
  19:              Target="_blank" />
```
```
  20:          <asp:ImageField DataImageUrlField="Group" DataImageUrlFormatString="~/images/16/{0}.png"
```
```
  21:              HeaderText="分组">
```
```
  22:          </asp:ImageField>
```
```
  23:      </Columns>
```
```
  24:  </asp:GridView>
```
这里用到了模板列、数据绑定列、复选框列、超链接列以及图片列，相信大家都不会陌生。

同时在页面后台代码中，如下初始化表格：
```
   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:  <ext:Grid ID="Grid1" ShowBorder="true" ShowHeader="true" Title="表格" Width="800px"
```
```
   2:      runat="server" DataKeyNames="Guid">
```
```
   3:      <Columns>
```
```
   4:          <ext:TemplateField Width="60px">
```
```
   5:              <ItemTemplate>
```
```
   6:                  <asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
```
```
   7:              </ItemTemplate>
```
```
   8:          </ext:TemplateField>
```
```
   9:          <ext:BoundField Width="100px" DataField="Name" DataFormatString="{0}" HeaderText="姓名" />
```
```
  10:          <ext:TemplateField Width="60px" HeaderText="性别">
```
```
  11:              <ItemTemplate>
```
```
  12:                  <asp:Label ID="Label3" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
```
```
  13:              </ItemTemplate>
```
```
  14:          </ext:TemplateField>
```
```
  15:          <ext:BoundField Width="60px" DataField="EntranceYear" HeaderText="入学年份" />
```
```
  16:          <ext:CheckBoxField Width="60px" RenderAsStaticField="true" DataField="AtSchool" HeaderText="是否在校" />
```
```
  17:          <ext:HyperLinkField HeaderText="所学专业" DataToolTipField="Major" DataTextField="Major"
```
```
  18:              DataTextFormatString="{0}" DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"
```
```
  19:              DataNavigateUrlFieldsEncode="true" Target="_blank" ExpandUnusedSpace="True" />
```
```
  20:          <ext:ImageField Width="60px" DataImageUrlField="Group" DataImageUrlFormatString="~/images/16/{0}.png"
```
```
  21:              HeaderText="分组"></ext:ImageField>
```
```
  22:          <ext:BoundField Width="100px" DataField="LogTime" DataFormatString="{0:yy-MM-dd}"
```
```
  23:              HeaderText="注册日期" />
```
```
  24:      </Columns>
```
```
  25:  </ext:Grid>
```
后台初始化代码更是一模一样（除了表格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了！

在这个例子中，还有两个小技巧：
1. 所学专业那一列的ExpandUnusedSpace属性用来控制此列充满所有的剩余空间，并且随着表格宽度变化而变化。
2. 所学专业那一列的DataToolTipField属性用来显示一个提示消息，在本列宽度不足时可以帮我们一个大忙，不信改变一下此列的大小看看。
固定列宽度和列宽度自适应

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

固定列宽度

这种方式就是前面看到的示例，我们之所以称其为固定列宽度方式，是因为除了自动扩展宽度列之外，所有的其他列宽度都是固定的。再来看下简化后的ASPX代码：
```
   1:  <ext:Grid Width="800px">
```
```
   2:      <Columns>
```
```
   3:          <ext:TemplateField Width="60px"></ext:TemplateField>
```
```
   4:          <ext:BoundField Width="100px" HeaderText="姓名" />
```
```
   5:          <ext:TemplateField Width="60px" HeaderText="性别"></ext:TemplateField>
```
```
   6:          <ext:BoundField Width="60px" HeaderText="入学年份" />
```
```
   7:          <ext:CheckBoxField Width="60px" HeaderText="是否在校" />
```
```
   8:          <ext:HyperLinkField HeaderText="所学专业" ExpandUnusedSpace="True" />
```
```
   9:          <ext:ImageField Width="60px" HeaderText="分组"></ext:ImageField>
```
```
  10:          <ext:BoundField Width="100px" HeaderText="注册日期" />
```
```
  11:      </Columns>
```
```
  12:  </ext:Grid>
```
本例中只有“所学专业”列没有设置宽度，并且设置ExpandUnusedSpace=true，这就意味着本列会占据所有的剩余宽度，本例中也就是：

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

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

列宽度自适应

有时我们希望各列的宽度都能根据表格的宽度自动调整，此时就要用到列宽度自适应模式了，其典型的ASPX标签结构如下：
```
   1:  <ext:Grid Width="800px" ForceFitAllTime="true">
```
```
   2:      <Columns>
```
```
   3:          <ext:TemplateField Width="50px"></ext:TemplateField>
```
```
   4:          <ext:BoundField Width="100px" HeaderText="姓名" />
```
```
   5:          <ext:TemplateField Width="50px" HeaderText="性别"></ext:TemplateField>
```
```
   6:          <ext:BoundField Width="50px" HeaderText="入学年份" />
```
```
   7:          <ext:CheckBoxField Width="50px" HeaderText="是否在校" />
```
```
   8:          <ext:HyperLinkField Width="300px" HeaderText="所学专业" ExpandUnusedSpace="True" />
```
```
   9:          <ext:ImageField Width="100px" HeaderText="分组"></ext:ImageField>
```
```
  10:          <ext:BoundField Width="100px" HeaderText="注册日期" />
```
```
  11:      </Columns>
```
```
  12:  </ext:Grid>
```
有两个关键点：
- 为表格增加属性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包含了哪些信息：
- ColumnIndex：列索引
- SortField：排序字段
  - 用来为列指定排序字段，必须设置表格的AllowSorting后此属性才有效。
- Hidden：是否隐藏列
  - 可以在Ajax中控制列的显示隐藏，参考在线示例。
- DataSimulateTreeLevelField：此列模拟树显示时的层次字段
  - 这是ExtAspNet的一个有用扩展，用来在表格中显示简单的树形结构。
- ColumnID：列ID
  - 可以用来指定的列，比如：CheckBoxField field2 = (CheckBoxField)Grid1.FindColumn("CheckBoxField2");
- HeaderText：标题栏显示的文字
- Width：列宽度
- ExpandUnusedSpace：此列会扩展所有未使用的宽度
  - 在“固定列宽度”模式中，表格中必须存在某列设置了此属性。
- TextAlign：文本的排列位置
  - 可以设置列中的文本居左、居中或者居右显示。
- ToolTip：提示文本
  - 每一列都可以指定提示文本，前面已经提到过了。
- DataToolTipField：提示字段名称
  - 可以设置提示文本的值为数据中某字段的值，还可以通过DataToolTipFormatString对其进行格式化。
- DataToolTipFormatString：提示字段格式化字符串
小结

表格是ExtAspNet中一个非常重要的控件，接下来我会通过几篇文章详细介绍这一控件的方方面面，也希望大家能够熟练掌握。

注：《ExtAspNet秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录官方论坛
相关阅读:
2014年互联网发展趋势如何
 服务器出现阶段性错误
 用互联网思想武装自己
 杭州互联网公司汇总
 互联网牛人网址大全
 ffmpeg开发指南
 Windows下FFmpeg快速入门
 FFmpeg介绍及参数详细说明
 windows 下FFMPEG的编译方法附2012-9-19发布的FFMPEG编译好的SDK下载
 FFMPEG视音频编解码零基础学习方法【荐】
原文地址：https://www.cnblogs.com/sanshi/p/2696284.html

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

准备数据

AspNet原生的GridView

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

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

表格控件有哪些列类型

小结