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

ExtAspNet的一大特色就是簡單易學，這一設計理念不僅指導ExtAspNet控件在命名上和AspNet原生控件保持一致，而且在編程習慣、事件方法命名、甚至是擴展屬性方法都盡量保持了AspNet的控件風格。從本章對ExtAspNet的Grid控件和AspNet的GridView的對比中，你會清晰地看到這一點。同時ExtAspNet的Grid還對AspNet的GridView進行了非常多並且有用的擴展，在接下來的幾篇文章中，我們會詳細講解。

 

准備數據

提供給Grid的數據一般是兩類，分別是數據表格和列表數據。在整個Grid控件的示例中，我們大部分時間都用到了硬編碼的表格數據（用來模擬數據庫查詢的返回值），下面就來看下這個表格數據的定義：

protected DataTable GetDataTable()
{
    DataTable table = new DataTable();
    table.Columns.Add(new DataColumn("Id", typeof(int)));
    table.Columns.Add(new DataColumn("Name", typeof(String)));
    table.Columns.Add(new DataColumn("EntranceYear", typeof(String)));
    table.Columns.Add(new DataColumn("AtSchool", typeof(bool)));
    table.Columns.Add(new DataColumn("Major", typeof(String)));
    table.Columns.Add(new DataColumn("Group", typeof(int)));
    table.Columns.Add(new DataColumn("Gender", typeof(int)));
    table.Columns.Add(new DataColumn("LogTime", typeof(DateTime)));
    table.Columns.Add(new DataColumn("Desc", typeof(string)));
    table.Columns.Add(new DataColumn("Guid", typeof(Guid)));

    DataRow row = table.NewRow();

    row[0] = 101;
    row[1] = "陳萍萍";
    row[2] = "2000";
    row[3] = true;
    row[4] = "計算機應用技術";
    row[5] = 1;
    row[6] = 0;
    row[7] = DateTime.Now.AddDays(-100);
    row[8] = "陳萍萍，女，20歲，出生於中國南方的一個小山村，畢業於中國科學技術大學。";
    row[9] = new Guid();
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = 102;
    row[1] = "胡飛";
    row[2] = "2008";
    row[3] = false;
    row[4] = "信息工程";
    row[5] = 1;
    row[6] = 1;
    row[7] = DateTime.Now.AddDays(-90);
    row[8] = "胡飛，男，20歲，出生於中國北方的一個小山村，畢業於南方科學技術大學。";
    row[9] = new Guid();
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = 103;
    row[1] = "金婷婷";
    row[2] = "2001";
    row[3] = true;
    row[4] = "會計學";
    row[5] = 2;
    row[6] = 0;
    row[7] = DateTime.Now.AddDays(-80);
    row[8] = "金婷婷，女，28歲，出生於中國海南島的一個小山村，畢業於中國科學技術大學。";
    row[9] = new Guid();
    table.Rows.Add(row);

    return table;
}

 

這個函數定義在頁面基類中，所以我們可以很方便的在每個頁面中調用此函數來初始化數據表格。

 

AspNet原生的GridView

首先來看下在AspNet中，如何使用數據綁定原生的GridView控件：

<asp:GridView ID="GridView1" Width="800px" DataKeyNames="Id,Name" AutoGenerateColumns="False"
    runat="server">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="姓名" />
        <asp:TemplateField HeaderText="性別">
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="EntranceYear" HeaderText="入學年份" />
        <asp:CheckBoxField DataField="AtSchool" HeaderText="是否在校" />
        <asp:HyperLinkField HeaderText="所學專業" DataTextField="Major" DataTextFormatString="{0}"
            DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"
            Target="_blank" />
        <asp:ImageField DataImageUrlField="Group" DataImageUrlFormatString="~/images/16/{0}.png"
            HeaderText="分組">
        </asp:ImageField>
    </Columns>
</asp:GridView>

這里用到了模板列、數據綁定列、復選框列、超鏈接列以及圖片列，相信大家都不會陌生。

同時在頁面后台代碼中，如下初始化表格：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindGrid();
    }
}

private void BindGrid()
{
    DataTable table = GetDataTable();

    GridView1.DataSource = table;
    GridView1.DataBind();
}

 

生成的界面如下所示：

 

使用ExtAspNet的Grid控件實現類似的界面

ExtAspNet的Grid控件實現類似的界面，其代碼幾乎一模一樣，只不過是把ASPX標簽中的asp:前綴改成了ext:。

不相信？一起來看看：

<ext:Grid ID="Grid1" ShowBorder="true" ShowHeader="true" Title="表格" Width="800px"
    runat="server" DataKeyNames="Guid">
    <Columns>
        <ext:TemplateField Width="60px">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
            </ItemTemplate>
        </ext:TemplateField>
        <ext:BoundField Width="100px" DataField="Name" DataFormatString="{0}" HeaderText="姓名" />
        <ext:TemplateField Width="60px" HeaderText="性別">
            <ItemTemplate>
                <asp:Label ID="Label3" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
            </ItemTemplate>
        </ext:TemplateField>
        <ext:BoundField Width="60px" DataField="EntranceYear" HeaderText="入學年份" />
        <ext:CheckBoxField Width="60px" RenderAsStaticField="true" DataField="AtSchool" HeaderText="是否在校" />
        <ext:HyperLinkField HeaderText="所學專業" DataToolTipField="Major" DataTextField="Major"
            DataTextFormatString="{0}" DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"
            DataNavigateUrlFieldsEncode="true" Target="_blank" ExpandUnusedSpace="True" />
        <ext:ImageField Width="60px" DataImageUrlField="Group" DataImageUrlFormatString="~/images/16/{0}.png"
            HeaderText="分組"></ext:ImageField>
        <ext:BoundField Width="100px" DataField="LogTime" DataFormatString="{0:yy-MM-dd}"
            HeaderText="注冊日期" />
    </Columns>
</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代碼：

<ext:Grid Width="800px">
    <Columns>
        <ext:TemplateField Width="60px"></ext:TemplateField>
        <ext:BoundField Width="100px" HeaderText="姓名" />
        <ext:TemplateField Width="60px" HeaderText="性別"></ext:TemplateField>
        <ext:BoundField Width="60px" HeaderText="入學年份" />
        <ext:CheckBoxField Width="60px" HeaderText="是否在校" />
        <ext:HyperLinkField HeaderText="所學專業" ExpandUnusedSpace="True" />
        <ext:ImageField Width="60px" HeaderText="分組"></ext:ImageField>
        <ext:BoundField Width="100px" HeaderText="注冊日期" />
    </Columns>
</ext:Grid>

本例中只有“所學專業”列沒有設置寬度，並且設置ExpandUnusedSpace=true，這就意味着本列會占據所有的剩余寬度，本例中也就是：

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

如果設置表格的寬度為900px，則“所學專業”列的寬度就變成了400px。

 

列寬度自適應

有時我們希望各列的寬度都能根據表格的寬度自動調整，此時就要用到列寬度自適應模式了，其典型的ASPX標簽結構如下：

<ext:Grid Width="800px" ForceFitAllTime="true">
    <Columns>
        <ext:TemplateField Width="50px"></ext:TemplateField>
        <ext:BoundField Width="100px" HeaderText="姓名" />
        <ext:TemplateField Width="50px" HeaderText="性別"></ext:TemplateField>
        <ext:BoundField Width="50px" HeaderText="入學年份" />
        <ext:CheckBoxField Width="50px" HeaderText="是否在校" />
        <ext:HyperLinkField Width="300px" HeaderText="所學專業" ExpandUnusedSpace="True" />
        <ext:ImageField Width="100px" HeaderText="分組"></ext:ImageField>
        <ext:BoundField Width="100px" HeaderText="注冊日期" />
    </Columns>
</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秘密花園》系列文章由三生石上原創，博客園首發，轉載請注明出處。文章目錄 官方論壇