[原創]ExtAspNet秘密花園（十七） — 表格之擴展列

ExtAspNet為表格控件提供非常豐富的擴展列，這些擴展列不僅豐富了數據展示的形式，而且極大地減少了程序員的編碼量。

 

序號列與復選列

首先來看下序號列和復選列的實際效果：

序號列和復選列只能出現在表格最前面的兩個位置，並且啟用這兩個列的方法也非常簡單：

只需要設置表格的EnableRowNumber和EnableCheckBoxSelect屬性為true即可！

 

注意：序號列表示的是當前頁的順序，因此即使表格翻頁后依然是從1開始的。

 

單選模式與多選模式

表格默認是多選模式，也就是可以一次選擇多條數據，選擇多條數據的方式和Windows下選擇文件的方式類似：

• 多次點擊復選列的復選框來選擇多行數據；
• 按下Shift鍵選擇連續的多行數據；
• 按下Control鍵選擇不連續的多行數據。

注意：點擊另一行會取消之前的所有選中行數據！

 

如果想啟用表格的單選模式，只需要設置EnableMultiSelect屬性為false即可！

 

如何在后台獲得選中的行？

protected void Button1_Click(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    int[] selections = Grid1.SelectedRowIndexArray;
    foreach (int rowIndex in selections)
    {
       sb.AppendFormat("行索引:{0} 用戶名:{1}<br />", rowIndex, Grid1.DataKeys[rowIndex][1]);
    }
    labResult.Text = sb.ToString();
}

通過如下步驟獲得選中行的數據：

1. 通過表格的SelectedRowIndexArray獲得選中行的索引號列表；
2. 通過表格的DataKeys（二維數組）獲取本行的數據列表，這就需要事先設置表格的DataKeyNames屬性（本例中是"Id,Name"）。

 

行擴展列

先來看下行擴展列的顯示效果：

看似復雜，其實實現起來相當的簡單，行擴展列其實就是一個帶RenderAsRowExpander屬性的模板列：

<ext:Grid ID="Grid1" ShowBorder="true" ShowHeader="true" Title="表格" Width="800px"
    runat="server" DataKeyNames="Id,Name">
    <Columns>
        <ext:TemplateField RenderAsRowExpander="true">
            <ItemTemplate>
                <div class="expander">
                    <p>
                        <strong>姓名：</strong><%# Eval("Name") %></p>
                    <p>
                        <strong>簡介：</strong><%# Eval("Desc") %></p>
                </div>
            </ItemTemplate>
        </ext:TemplateField>
        <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="姓名" />
        // 省略其他列...
    </Columns>
</ext:Grid>

 

行擴展列默認是折疊起來的，如何讓所有的行擴展列默認打開呢？

ExtAspNet考慮到了這個實際的需求，只需要設置一個屬性ExpandAllRowExpanders即可實現如下效果：

 

模擬樹列

模擬樹列是ExtAspNet的一個簡單創新，卻非常有用，來看實際效果：

大家也可以先考慮下如何實現這個效果，為了盡量和普通表格的數據綁定保持一致，數據源也必須是DataTable或者IEnumerable。

有了這個設定，問題就簡單了，我們只需要為每行數據准備一個表示樹層次的字段即可。

 

就本例而言，如果“中國”行的樹層次為0，則有如下簡單的規則：

• 中國：0
•   河南省：1
•       駐馬店市：2
•       漯河市：2
•   安徽省：1
•       合肥市：2
•       黃山市：2

下面來看下模擬此結構的數據實現代碼：

private static DataTable IniGrid()
{
    DataTable table = new DataTable();
    DataColumn column1 = new DataColumn("Id", typeof(int));
    DataColumn column2 = new DataColumn("Name", typeof(String));
    DataColumn column3 = new DataColumn("Group", typeof(String));
    DataColumn column4 = new DataColumn("TreeLevel", typeof(int));
    table.Columns.Add(column1);
    table.Columns.Add(column2);
    table.Columns.Add(column3);
    table.Columns.Add(column4);

    DataRow row = table.NewRow();
    row[0] = 101;
    row[1] = "中國";
    row[2] = "1";
    row[3] = 0;
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = 102;
    row[1] = "河南省";
    row[2] = "2";
    row[3] = 1;
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = 103;
    row[1] = "駐馬店市";
    row[2] = "3";
    row[3] = 2;
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = 104;
    row[1] = "漯河市";
    row[2] = "3";
    row[3] = 2;
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = 105;
    row[1] = "安徽省";
    row[2] = "2";
    row[3] = 1;
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = 106;
    row[1] = "合肥市";
    row[2] = "3";
    row[3] = 2;
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = 107;
    row[1] = "黃山市";
    row[2] = "3";
    row[3] = 2;
    table.Rows.Add(row);

    return table;
}

 

來看下ASPX標簽結構，我們需要為“地區”列指定要綁定的樹層次字段：

<ext:Grid ID="Grid1" Title="表格" ShowBorder="true" ShowHeader="true" AutoHeight="true"
    runat="server" EnableCheckBoxSelect="True" DataKeyNames="Id,Name" Width="800px"
    EnableRowNumber="True">
    <Columns>
        <ext:BoundField DataField="Name" DataSimulateTreeLevelField="TreeLevel" DataFormatString="{0}"
            HeaderText="地區" ExpandUnusedSpace="True" />
        <ext:ImageField Width="60px" DataImageUrlField="Group" DataImageUrlFormatString="~/images/16/{0}.png"
            HeaderText="分組"></ext:ImageField>
    </Columns>
</ext:Grid>

注意：“地區”列的DataSimulateTreeLevelField屬性將此列轉換為模擬樹的列。

 

彈出窗體列

彈出窗口列，顧名思義就是點擊可以彈出窗體的列，其實用模板列也完全可以實現，只不過彈出窗體列可以簡化我們的代碼編寫。

首先看下顯示效果：

要實現此效果，頁面上必須事先定義一個隱藏的Window控件，如下所示：

<ext:Window ID="Window1" Title="編輯" Popup="false" EnableIFrame="true" runat="server"
    CloseAction="HidePostBack" EnableConfirmOnClose="true" IFrameUrl="about:blank"
    EnableMaximize="true" EnableResize="true" OnClose="Window1_Close" Target="Top"
    IsModal="True" Width="750px" Height="450px">
</ext:Window>

關於Window控件，后面會有專門篇幅講解，這就不多說。

而彈出窗體列的作用就是生成一個可以點擊的錨點鏈接，當用戶點擊時在客戶端直接彈出這個窗體。

 

模板列實現彈出窗體列的功能

首先來看下使用模板列的ASPX標簽定義：

<ext:TemplateField HeaderText="模板列" Width="60px">
    <ItemTemplate>
        <a href="javascript:<%# GetEditUrl(Eval("Id"), Eval("Name")) %>">編輯</a>
    </ItemTemplate>
</ext:TemplateField>

再來看下GetEditUrl函數的定義：

protected string GetEditUrl(object id, object name)
{
    return Window1.GetShowReference("grid_iframe_window.aspx?id=" + id, "編輯 - " + name);
}

 

彈出窗體列的結構

而相同的功能使用彈出窗體列，只需要ASPX標簽定義就行了，而且可以方便地定義彈出窗體標題，IFrame地址等屬性：

<ext:WindowField ColumnID="myWindowField" Width="60px" WindowID="Window1" HeaderText="窗口列"
    Icon="Pencil" ToolTip="編輯" DataTextFormatString="{0}" DataIFrameUrlFields="Id"
    DataIFrameUrlFormatString="grid_iframe_window.aspx?id={0}" DataWindowTitleField="Name"
    DataWindowTitleFormatString="編輯 - {0}" />

 

小結

ExtAspNet對表格的擴展列不僅豐富了數據展現的形式，而且極大的方便了代碼的編寫。特別是序號列、復選列以及彈出窗體列在實際項目中非常實用，需要大家熟練掌握。下一篇文章，我們會詳細討論表格中的各種事件，其實我們在上一篇文章已經接觸到了排序和翻頁兩種事件，除此之外還有更多的事件等待着我們去探索學習。

 

注：《ExtAspNet秘密花園》系列文章由三生石上原創，博客園首發，轉載請注明出處。文章目錄 官方論壇