使用ComponentOne WinForms 表格控件FlexGrid,将诸多定制能力内嵌在产品中,让应用系统自如交互。比如调整列宽、调整行高、自适应匹配最佳列宽、自适应匹配最佳行高、通过下拉窗口选择单元格的数据、通过可视化日期控件或计算器控件指定单元格的值。
本篇博客将讲述如何设置FlexGrid单元格类型,FlexGrid支持复选框,下拉列表,按钮,掩码,日历以及自定义单元格类型。以及自由定制行、列、单元格。
1. 自定义FlexGrid不同的数据类型
自定义FlexGrid基础类型UITypEditor:
UITypeEditorControl实现ComboBox,IServiceProvider,IWindowsFormsEditorService的接口,是其他数据类型的基础,继承关系如下:
#region ** UITypeEditorControl (base class for all of the controls below) /// <summary> /// UITypeEditorControl /// </summary> public class UITypeEditorControl : ComboBox, IServiceProvider, IWindowsFormsEditorService { } #endregion
自定义FlexGrid的CheckListEditor数据类型:
从上述UITypeEditorControl派生的可下拉的复选框列表,用户可以从下拉列表单选或多选各个选项,可以任意组合选项,如图所示:
该类定义如下代码,具体实现代码可以参考结尾Demo的CheckListEditor类。
#region ** CheckListEditor // // CheckListEditor // UITypeEditor that can be used to edit items in CheckedListBox control. // Users can check any combination. // public class CheckListEditor : UITypeEditor #endregion
自定义FlexGrid的FlexHyperlink数据类型:
从上述UITypeEditorControl派生的可下拉的复选框列表,用户可以从下拉列表单选或多选各个选项,样子如图所示:
该类定义如下代码,具体实现代码可以参考结尾Demo的FlexHyperlink类。
#region ** FlexHyperlink class public class FlexHyperlink #endregion
2.手动添加FlexGrid的列以及数据类型
本篇中的FlexGrid是非绑定模式,需要手动的添加列和数据。
首先通过FlexGrid.Cols.Count设置FlexGrid的列数,Domo中有13列。
c1FlexGrid1.Cols.Count = 13 ;
其次通过Column的DataType设置各个列的数据类型,以及Width属性设置列宽。
设置列的数据类型为步骤1中的CheckListEditor,代码参考如下:
//Checkbox List column Column checkListCol = c1FlexGrid1.Cols[_checkListCol]; CheckListEditor checkListEditor = new CheckListEditor(new string[] { "丹麦语", "荷兰语", "英语", "芬兰语", "法语", "德语", "意大利语", "挪威语", "波兰语", "葡萄牙语", "西班牙语", "瑞典语" }); checkListCol.Caption = "复选框列表"; checkListCol.Editor = new UITypeEditorControl(checkListEditor, false); checkListCol.Width = 150;
设置列的数据类型为步骤1中的FlexHyperlink,代码参考如下:
//Hyperlink column Column hyperlinkCol = c1FlexGrid1.Cols[_hyperlinkCol]; hyperlinkCol.AllowEditing = true; hyperlinkCol.Width = 160; hyperlinkCol.Caption = "超链接"; hyperlinkCol.ComboList = "..."; CellStyle cs = c1FlexGrid1.Styles.Add("NewLink"); cs.Font = new Font(c1FlexGrid1.Font, FontStyle.Underline); cs.ForeColor = Color.Blue; cs = c1FlexGrid1.Styles.Add("OldLink"); cs.Font = new Font(c1FlexGrid1.Font, FontStyle.Underline); cs.ForeColor = Color.Purple;
</>
3.手动添加FlexGrid的单元格数据
根据已经添加好的列,现在需要给FlexGrid填充数据。
首先通过FlexGrid.Rows.Count设置行数,本Demo有21行。
c1FlexGrid1.Rows.Count = 21;
然后逐行通过代码填充数据,具体代码见本文底部附件Demo的LoadData方法。
给FlexGrid自定义的CheckListEditor列填充数据,代码参考如下:
string languages = "西班牙语|德语|荷兰语, 法语, 德语|葡萄牙语|英语, 法语|丹麦语|芬兰语, 瑞典语|法语|德语|英语|意大利语|西班牙语|芬兰语, 挪威语|波兰语|葡萄牙语|西班牙语|瑞典语|法语, 德语, 意大利语|英语|英语"; for (int i = 1; i < c1FlexGrid1.Rows.Count; i++) { //Load checkbox list data c1FlexGrid1[i, _checkListCol] = languages.Split('|')[i - 1]; }
给FlexGrid自定义的FlexHyperlink列填充数据,代码参考如下:
//Load hyperlink column c1FlexGrid1[1, _hyperlinkCol] = new FlexHyperlink("旅游秘书处", "http://www.turismo.gov.ar/eng/menu.htm"); c1FlexGrid1[2, _hyperlinkCol] = new FlexHyperlink("澳大利亚大使馆", "http://www.austria.org/"); c1FlexGrid1[3, _hyperlinkCol] = new FlexHyperlink("游览比利时", "http://www.visitbelgium.com/"); c1FlexGrid1[4, _hyperlinkCol] = new FlexHyperlink("巴西 - 维基百科", "http://en.wikipedia.org/wiki/Brazil"); c1FlexGrid1[5, _hyperlinkCol] = new FlexHyperlink("加拿大官网", "http://www.canada.com/"); c1FlexGrid1[6, _hyperlinkCol] = new FlexHyperlink("丹麦的官方网", "http://www.denmark.dk/"); c1FlexGrid1[7, _hyperlinkCol] = new FlexHyperlink("芬兰的新闻", "http://finland.fi/"); c1FlexGrid1[8, _hyperlinkCol] = new FlexHyperlink("法国导游网", "http://www.franceguide.com/"); c1FlexGrid1[9, _hyperlinkCol] = new FlexHyperlink("德国信息网", "http://www.germany.info/"); c1FlexGrid1[10, _hyperlinkCol] = new FlexHyperlink("发现爱尔兰", "http://www.discoverireland.ie/"); c1FlexGrid1[11, _hyperlinkCol] = new FlexHyperlink("关于意大利", "http://www.state.gov/r/pa/ei/bgn/4033.htm"); c1FlexGrid1[12, _hyperlinkCol] = new FlexHyperlink("游览墨西哥", "http://www.visitmexico.com/"); c1FlexGrid1[13, _hyperlinkCol] = new FlexHyperlink("挪威官方网", "http://www.norway.org/"); c1FlexGrid1[14, _hyperlinkCol] = new FlexHyperlink("波兰.pl", "http://www.poland.pl/"); c1FlexGrid1[15, _hyperlinkCol] = new FlexHyperlink("葡萄牙地图", "http://www.portugal-info.net/maps/"); c1FlexGrid1[16, _hyperlinkCol] = new FlexHyperlink("西班牙旅行者", "http://www.spain.info/"); c1FlexGrid1[17, _hyperlinkCol] = new FlexHyperlink("游览瑞典", "http://www.visitsweden.com/"); c1FlexGrid1[18, _hyperlinkCol] = new FlexHyperlink("游览瑞士", "http://www.about.ch/"); c1FlexGrid1[19, _hyperlinkCol] = new FlexHyperlink("谷歌 英国", "http://www.google.co.uk/"); c1FlexGrid1[20, _hyperlinkCol] = new FlexHyperlink("美利坚合众国 - 维基百科", http://en.wikipedia.org/wiki/United_States);
至此,FlexGrid的行、列、单元格已经定制成功,如下图所示:
本文演示的Demo源代码如下: