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

最新推荐文章于 2021-12-20 22:16:29 发布

sanshi_zhang

最新推荐文章于 2021-12-20 22:16:29 发布

阅读量2.2k

点赞数

分类专栏： FineUI

本文链接：https://blog.youkuaiyun.com/u010918003/article/details/9160577

版权

本文详细介绍了在FineUI中动态创建表格列的方法，包括动态创建的列和模板列。通过实例展示了如何在后台代码中创建和设置 BoundField 和模板列。同时，深入探讨了Asp.Net的视图状态、页面生命周期以及动态添加控件的四种模式，强调了动态添加控件的关键时机和注意事项。最后，总结了动态创建控件的原理，并预告了下一篇文章将讨论表格导出Excel的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

动态创建的列

还是通过一个示例来看下如何在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:  }

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

在页面的初始化阶段：

创建一个新的FineUI.BoundField实例；
设置此实例的DataField、DataFormatString、HeaderText等属性；
将新创建的列添加到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:

最低0.47元/天解锁文章