[原创]FineUI秘密花园（二十一） — 表格之动态创建列

有时我们需要根据数据来动态创建表格列，怎么来做到这一点呢？本章会详细讲解。

 

动态创建的列

还是通过一个示例来看下如何在FineUI中动态创建表格列，示例的界面截图：

 

先来看下ASPX的标签定义：

   1:  <ext:Grid ID="Grid1" runat="server" Width="650px" EnableCheckBoxSelect="true" EnableRowNumber="true"

   2:      Title="表格（动态创建的列）">

   3:  </ext:Grid>

 

ASPX标签中没有定义任何列，所有列都是在后台定义的：

   1:  // 注意：动态创建的代码需要放置于Page_Init（不是Page_Load），这样每次构造页面时都会执行

   2:  protected void Page_Init(object sender, EventArgs e)

   3:  {
  

   4:      InitGrid();

   5:  }

   6:   

   7:  private void InitGrid()

   8:  {
  

   9:      FineUI.BoundField bf;

  10:   

  11:      bf = new FineUI.BoundField();

  12:      bf.DataField = "Id";

  13:      bf.DataFormatString = "{0}";

  14:      bf.HeaderText = "编号";

  15:      Grid1.Columns.Add(bf);

  16:   

  17:      bf = new FineUI.BoundField();

  18:      bf.DataField = "Name";

  19:      bf.DataFormatString = "{0}";

  20:      bf.HeaderText = "姓名";

  21:      Grid1.Columns.Add(bf);

  22:   

  23:      bf = new FineUI.BoundField();

  24:      bf.DataField = "EntranceYear";

  25:      bf.DataFormatString = "{0}";

  26:      bf.HeaderText = "入学年份";

  27:      Grid1.Columns.Add(bf);

  28:   

  29:      bf = new FineUI.BoundField();

  30:      bf.DataToolTipField = "Major";

  31:      bf.DataField = "Major";

  32:      bf.DataFormatString = "{0}";

  33:      bf.HeaderText = "所学专业";

  34:      bf.ExpandUnusedSpace = true;

  35:      Grid1.Columns.Add(bf);

  36:   

  37:      Grid1.DataKeyNames = new string[] { "Id", "Name" };

  38:  }

  39:   

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

  41:  {
  

  42:      if (!IsPostBack)

  43:      {
  

  44:          LoadData();

  45:      }

  46:  }

  47:   

  48:  private void LoadData()

  49:  {
  

  50:      DataTable table = GetDataTable();

  51:   

  52:      Grid1.DataSource = table;

  53:      Grid1.DataBind();

  54:  }

整个代码结构非常清晰，分为页面的初始化阶段和页面的加载阶段。

在页面的初始化阶段：

1. 创建一个新的FineUI.BoundField实例；
2. 设置此实例的DataField、DataFormatString、HeaderText等属性；
3. 将新创建的列添加到Grid1.Columns属性中。

 

页面的加载阶段就是绑定数据到表格，和之前的处理没有任何不同。

 

动态创建的模板列

模板列的动态创建有点复杂，我们先来看下创建好的模板列：

 

ASPX标签和上面例子一模一样，就不再赘述。我们来看下动态创建模板列的代码：

   1:  FineUI.TemplateField tf = new TemplateField();

   2:  tf.Width = Unit.Pixel(100);

   3:  tf.HeaderText = "性别（模板列）";

   4:  tf.ItemTemplate = new GenderTemplate();

   5:  Grid1.Columns.Add(tf);

 

这里的GenderTemplate是我们自己创建的类，这也是本例的关键点。

   1:  public class GenderTemplate : ITemplate

   2:  {
  

   3: