首页 > 代码库 > FineUI第十七天---- 表格之扩展列

FineUI第十七天---- 表格之扩展列

 表格之扩展列

1.序号列与复选列:只需要设置表格的EnableRowNumberEnableCheckBoxSelect属性为true即可!

注意:序号列表示的是当前页的顺序,因此即使表格翻页后依然是从1开始的。

默认是多选模式,方式Control、Shift。 取消多选:EnableMultiSelect属性false即可!

技术分享

如果在后台获取选中的行呢? 

1 int[] selections = Grid1.SelectedRowIndexArray;
2         foreach (int rowIndex in selections)
3      {
4          sb.AppendFormat("行索引:{0} 用户名:{1}<br />", rowIndex, Grid1.DataKeys[rowIndex][1]);

1.通过表格的SelectedRowIndexArray获得选中行的索引号列表;

2.通过表格的DataKeys(二维数组)获取本行的数据列表,这就需要事先设置表格的DataKeyNames属性(本例中是"Id,Name")。

 

 2.行扩展列:  

技术分享

其实只是设置了 RenderAsRowExpander属性

技术分享 

然后。扩展列默认是折叠起来的。设置ExpandAllRowExpanders即可全部展开。

 

3.表格中模拟树(很常用):

  1   <x:Grid ID="Grid1" Title="表格" ShowBorder="true" ShowHeader="true"

 2             runat="server" EnableCheckBoxSelect="true" DataKeyNames="Id,Name" Width="800px">
 3             <Columns>
 4                 <x:BoundField DataField="Name" DataSimulateTreeLevelField="TreeLevel" DataFormatString="{0}"
 5                     HeaderText="地区" ExpandUnusedSpace="True" />
 6                 <x:ImageField Width="60px" DataImageUrlField="Group" DataImageUrlFormatString="~/images/16/{0}.png"
 7                     HeaderText="分组">
 8                 </x:ImageField>
 9             </Columns>
10         </x:Grid> 
以下是后台代码: 

 1 DataTable table = new DataTable();
 2         DataColumn column1 = new DataColumn("Id"typeof(int));
 3         DataColumn column2 = new DataColumn("Name"typeof(String));
 4         DataColumn column3 = new DataColumn("Group"typeof(String));
 5         DataColumn column4 = new DataColumn("TreeLevel"typeof(int));
 6         table.Columns.Add(column1);
 7         table.Columns.Add(column2);
 8         table.Columns.Add(column3);
 9         table.Columns.Add(column4);
10      
11         DataRow row = table.NewRow();
12         row[0] = 101;
13         row[1] = "中国";
14         row[2] = "1";
15         row[3] = 0;

16         table.Rows.Add(row); 

 技术分享

 4.弹出窗口:

1 <ext:Window ID="Window1" Title="编辑" Popup="false" EnableIFrame="true" runat="server"
2    CloseAction="HidePostBack" EnableConfirmOnClose="true" IFrameUrl="about:blank"
3       EnableMaximize="true" EnableResize="true" OnClose="Window1_Close" Target="Top"
4       IsModal="True" Width="750px" Height="450px">

5   </ext:Window> 

 这是一个窗口

 1 首先来看下使用模板列的ASPX标签定义:
 3   <ext:TemplateField HeaderText="模板列" Width="60px">
 4       <ItemTemplate>
 5        <a href=http://www.mamicode.com/"javascript:<%# GetEditUrl(Eval("Id"), Eval("Name")) %>">编辑</a>
 6    </ItemTemplate>
 7   </ext:TemplateField>
 8 再来看下GetEditUrl函数的定义:
 9 
10  protected string GetEditUrl(object id, object name)
11  {
12   return Window1.GetShowReference("grid_iframe_window.aspx?id=" + id, "编辑 - " + name);
13  }

还有一种简便的方式:

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

 好了。表格的扩展列就介绍到这里为止。

 

FineUI第十七天---- 表格之扩展列