[原创]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秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录 官方论坛