在GridControl表格控件中实现多层级主从表数据的展示
在一些应用场景中,我们需要实现多层级的数据表格显示,如常规的二级主从表数据展示,甚至也有多个层级展示的需求,那么我们如何通过DevExpress的GridControl控表格件实现这种业务需求呢?本篇随笔基于这个需求,对二级、三级的主从表数据进行展示,从而揭开对多层级数据展示的神秘面纱。
1、二级主从表数据展示
主从表数据,我们知道,一个主表记录里面关联有多条明细从表记录,在数据定义的层次上我们体现如下所示。
先定义一个实体类信息作为载体。
/// <summary>/// 记录基础信息/// </summary>public class DetailInfo{public DetailInfo(){this.ID = Guid.NewGuid().ToString();}/// <summary>/// ID标识/// </summary>public string ID { get; set; }/// <summary>/// 名称/// </summary>public string Name { get; set; }/// <summary>/// 描述信息/// </summary>public string Description { get; set; }}
然后主从表的数据实体类就是除了包含这些信息外,再包含一个子列表(列表信息不一定是同一个实体类),如下所示。
/// <summary>/// 二级层次的列表/// </summary>public class Detail2Result : DetailInfo{public List<DetailInfo> Detail2List { get; set; }}
这个是我们使用继承关系简化了信息的定义,就是这个实体类包含主表信息外,还包含一个列表集合,属于从表数据的。
有了这些数据的定义,我们构建一些测试的数据,如下所示。
//创建测试数据var result = new Detail2Result(){Name = "测试",Description = "描述内容",Detail2List = new List<DetailInfo>(){new DetailInfo(){Name = "111测试",Description = "111描述内容"},new DetailInfo(){Name = "222测试",Description = "222描述内容"},new DetailInfo(){Name = "333测试",Description = "333描述内容"}}};//构造一个记录的集合var list = new List<Detail2Result>() { result };
这样我们就构建了一个主表从表记录的数据源,可以用于表格控件的绑定的了。
首先我们在界面上创建一个空白的窗体用于演示,并在窗体上增加一个GridControl控件用于展示主从表的数据,如下界面所示。
然后,我们可以通过代码创建我们需要的视图信息,如创建主表的GridView显示如下所示。
/// <summary>/// 创建第一个视图/// </summary>private void CreateGridView(){var grv = this.gridView1;//创建从表显示的列 grv.Columns.Clear();grv.CreateColumn("ID", "ID");//.Visible = false;grv.CreateColumn("Name", "名称");grv.CreateColumn("Description", "描述内容");grv.OptionsBehavior.ReadOnly = false;grv.OptionsBehavior.Editable = true;}
很简单,我们创建几个列,并指定它的Caption中文显示属性就可以了,然后我们接着还需要创建从表的GridView显示数据,这个是这篇随笔的关键。
具体的代码一次性贴出来,如下所示。
GridView grv2 = null;/// <summary>/// 创建第二个视图/// </summary>private void CreateLevelView(){var grv = this.gridView1;var gridControl = this.gridControl1;//创建一个从表的GridView对象grv2 = new GridView();grv2.ViewCaption = "记录明细";grv2.Name = "grv2";grv2.GridControl = gridControl;//构建GridLevelNode并添加到LevelTree集合里面var node = new GridLevelNode();node.LevelTemplate = grv2;node.RelationName = "Detail2List";//这里对应集合的属性名称gridControl.LevelTree.Nodes.AddRange(new GridLevelNode[]{node});//添加对应的视图集合显示 gridControl.ViewCollection.Clear();gridControl.ViewCollection.AddRange(new BaseView[] { grv, grv2 });//创建从表显示的列 grv2.Columns.Clear();grv2.CreateColumn("ID", "ID");grv2.CreateColumn("Name", "名称");grv2.CreateColumn("Description", "描述内容");//设置非只读、可编辑grv2.OptionsBehavior.ReadOnly = false;grv2.OptionsBehavior.Editable = true;}
我们这里注意到 GridLevelNode 对象,它是我们主从表节点的关键信息,我们需要了解下面部分的代码
//构建GridLevelNode并添加到LevelTree集合里面var node = new GridLevelNode();node.LevelTemplate = grv2;node.RelationName = "Detail2List";//这里对应集合的属性名称gridControl.LevelTree.Nodes.AddRange(new GridLevelNode[]{node});
首先是创建一个节点,然后指定它的 LevelTemplate 为我们新建的GridView,并且他的子集合对象名称为 Detail2List ,最后把这个节点的信息加入到 gridControl.LevelTree.Nodes 里面就可以了,其他的代码就和第一步差不多,指定显示的列和中文显示名称即可。
还有就是我们需要把创建的GridView 加入到指定的集合里面。
//添加对应的视图集合显示 gridControl.ViewCollection.Clear();gridControl.ViewCollection.AddRange(new BaseView[] { grv, grv2 });
到这里基本上就是大功告成了,剩下的就是数据的绑定处理了。前面我们已经介绍了实体类的准备工作和创建测试数据的代码,那么我们这里沿用上面的代码进行数据的绑定就可以了。如下代码所示。
/// <summary>/// 绑定数据源/// </summary>private void BindData(){//创建测试数据var result = new Detail2Result(){Name = "测试",Description = "描述内容",Detail2List = new List<DetailInfo>(){new DetailInfo(){Name = "111测试",Description = "111描述内容"},new DetailInfo(){Name = "222测试",Description = "222描述内容"},new DetailInfo(){Name = "333测试",Description = "333描述内容"}}};//构造一个记录的集合var list = new List<Detail2Result>() { result };//绑定数据源this.gridControl1.DataSource = list;}private void FrmTestDetails_Load(object sender, EventArgs e){BindData();}
我们来运行下完成的程序界面,可以看到例子的效果界面如下所示。
我们可以看到数据记录是有树形节点的,展开就可以看到明细记录了,这个就是我们这里介绍的二级主从表数据的展示效果。
2、三级主从表数据展示
上面介绍了二级主从表的数据展示,其实GridControl可以用于展示三级以及更多层级的数据展示,只要你的数据设计合理,就可实现多层级的正确展示的。
本小节介绍三级的主从表数据展示,和二级数据展示类似,不过我们进一步实现了多层级的处理而已。
我们在二级层次的数据上定义了一个三级层次的数据实体类,如下所示。
/// <summary>/// 二级层次的列表/// </summary>public class Detail2Result : DetailInfo{public List<DetailInfo> Detail2List { get; set; }}/// <summary>/// 三级层次的列表/// </summary>public class Detail3Result : DetailInfo{public List<Detail2Result> Detail3List { get; set; }}
三级层次的测试数据初始化如下所示:
//创建测试数据var result = new Detail3Result(){Name = "测试11",Description = "描述内容11",//二级列表Detail3List = new List<Detail2Result>(){new Detail2Result(){Name = "测试22",Description = "描述内容22",//三级列表Detail2List = new List<DetailInfo>() {new DetailInfo(){Name = "31测试",Description = "31描述内容"},new DetailInfo(){Name = "32测试",Description = "32描述内容"},new DetailInfo(){Name = "33测试",Description = "33描述内容"}}}}};//构造一个记录的集合var list = new List<Detail3Result>() { result };
和二级层次的处理步骤类似,我们先创建主表的信息展示,如下所示。
/// <summary>/// 创建第一个视图/// </summary>private void CreateGridView(){var grv = this.gridView1;var gridControl = this.gridControl1;//创建从表显示的列 grv.Columns.Clear();grv.CreateColumn("ID", "ID");//.Visible = false;grv.CreateColumn("Name", "名称");grv.CreateColumn("Description", "描述内容");grv.OptionsBehavior.ReadOnly = false;grv.OptionsBehavior.Editable = true;}
然后着手创建二级、三级的列表信息展示,
GridView grv2 = null;GridView grv3 = null;/// <summary>/// 创建第二个视图/// </summary>private void CreateLevelView(){var grv = this.gridView1;var gridControl = this.gridControl1;//创建一个二级从表的GridView对象grv2 = new GridView();grv2.ViewCaption = "记录明细";grv2.Name = "grv2";grv2.GridControl = gridControl;//创建一个三级从表的GridView对象grv3 = new GridView();grv3.ViewCaption = "记录明细2";grv3.Name = "grv3";grv3.GridControl = gridControl;
这样我们相当于创建多两个(总共三个GridView对象)用于展示数据列表。
接着最为关键的是主从关系的节点,我们可以简单的理解他的Node节点和我们树形列表的Node处理方式类似即可。
//构建GridLevelNodevar topNode = new GridLevelNode();topNode.LevelTemplate = grv2; //这里是对应的视图topNode.RelationName = "Detail3List"; //这里对应集合的属性名称//构建GridLevelNodevar secondNode = new GridLevelNode();secondNode.LevelTemplate = grv3; //这里是对应的视图secondNode.RelationName = "Detail2List";//这里对应集合的属性名称//需要添加节点的层级关系,类似Tree节点处理 topNode.Nodes.Add(secondNode);//最后添加节点到集合里面gridControl.LevelTree.Nodes.Add(topNode);
通过定义两个GridLevelNode,然后指定他们的Node关系( topNode.Nodes.Add(secondNode) ),这样我们就可以很清晰的关联起来它们的节点关系了。
最后是把我们创建的几个视图加入到集合里面,并设定一些关系即可。
//添加对应的视图集合显示 gridControl.ViewCollection.Clear();gridControl.ViewCollection.AddRange(new BaseView[] { grv, grv2, grv3 });//创建从表显示的列 grv2.Columns.Clear();grv2.CreateColumn("ID", "ID");grv2.CreateColumn("Name", "名称");grv2.CreateColumn("Description", "描述内容");//创建从表显示的列 grv3.Columns.Clear();grv3.CreateColumn("ID", "ID");grv3.CreateColumn("Name", "名称");grv3.CreateColumn("Description", "描述内容");//设置非只读、可编辑grv2.OptionsBehavior.ReadOnly = false;grv2.OptionsBehavior.Editable = true;//设置非只读、可编辑grv3.OptionsBehavior.ReadOnly = false;grv3.OptionsBehavior.Editable = true;
整个部分的代码如下所示。
GridView grv2 = null;GridView grv3 = null;/// <summary>/// 创建第二个视图/// </summary>private void CreateLevelView(){var grv = this.gridView1;var gridControl = this.gridControl1;//创建一个二级从表的GridView对象grv2 = new GridView();grv2.ViewCaption = "记录明细";grv2.Name = "grv2";grv2.GridControl = gridControl;//创建一个三级从表的GridView对象grv3 = new GridView();grv3.ViewCaption = "记录明细2";grv3.Name = "grv3";grv3.GridControl = gridControl;//构建GridLevelNodevar topNode = new GridLevelNode();topNode.LevelTemplate = grv2; //这里是对应的视图topNode.RelationName = "Detail3List"; //这里对应集合的属性名称//构建GridLevelNodevar secondNode = new GridLevelNode();secondNode.LevelTemplate = grv3; //这里是对应的视图secondNode.RelationName = "Detail2List";//这里对应集合的属性名称//需要添加节点的层级关系,类似Tree节点处理 topNode.Nodes.Add(secondNode);//最后添加节点到集合里面 gridControl.LevelTree.Nodes.Add(topNode);//添加对应的视图集合显示 gridControl.ViewCollection.Clear();gridControl.ViewCollection.AddRange(new BaseView[] { grv, grv2, grv3 });//创建从表显示的列 grv2.Columns.Clear();grv2.CreateColumn("ID", "ID");grv2.CreateColumn("Name", "名称");grv2.CreateColumn("Description", "描述内容");//创建从表显示的列 grv3.Columns.Clear();grv3.CreateColumn("ID", "ID");grv3.CreateColumn("Name", "名称");grv3.CreateColumn("Description", "描述内容");//设置非只读、可编辑grv2.OptionsBehavior.ReadOnly = false;grv2.OptionsBehavior.Editable = true;//设置非只读、可编辑grv3.OptionsBehavior.ReadOnly = false;grv3.OptionsBehavior.Editable = true;}
也就是我们在窗体初始化的时候,创建它们的视图关系即可,如下代码所示。
/// <summary>/// 测试三级主从明细列表/// </summary>public partial class FrmTestDetails2 : BaseForm{public FrmTestDetails2(){InitializeComponent();CreateGridView();CreateLevelView();}
最后就是数据源的绑定操作了,这个利用前面介绍过的准备数据即可。
private void FrmTestDetails2_Load(object sender, EventArgs e){BindData();}/// <summary>/// 绑定数据源/// </summary>private void BindData(){//创建测试数据var result = new Detail3Result(){Name = "测试11",Description = "描述内容11",//二级列表Detail3List = new List<Detail2Result>(){new Detail2Result(){Name = "测试22",Description = "描述内容22",//三级列表Detail2List = new List<DetailInfo>() {new DetailInfo(){Name = "31测试",Description = "31描述内容"},new DetailInfo(){Name = "32测试",Description = "32描述内容"},new DetailInfo(){Name = "33测试",Description = "33描述内容"}}}}};//构造一个记录的集合var list = new List<Detail3Result>() { result };//绑定数据源this.gridControl1.DataSource = list;}
以上就是三级层次的关系处理,如果我们理解了,其他更多层级的数据展示也是依照这个规则,增加节点和视图即可,原理一样。
案例的效果如下所示。
3、利用分页控件实现数据的展示
上面的两个案例是基于DevExpress的内置表格控件GridControl进行处理的,我们在Winform框架的开发过程中,往往为了效率和分页方便,一般都是使用分页控件来展示数据的,那么利用分页控件实现多层级的数据展示是如何的呢?
其实基本步骤也是差不多的,只是主表视图使用分页控件即可,如下所示。
/// <summary>/// 数据指定的主从表展示/// </summary> public partial class FrmDictTypeMasterDetail : BaseDock{public FrmDictTypeMasterDetail(){InitializeComponent();InitDictItem();this.winGridViewPager1.OnPageChanged += new EventHandler(winGridViewPager1_OnPageChanged);this.winGridViewPager1.OnStartExport += new EventHandler(winGridViewPager1_OnStartExport);this.winGridViewPager1.OnDeleteSelected += new EventHandler(winGridViewPager1_OnDeleteSelected);this.winGridViewPager1.OnRefresh += new EventHandler(winGridViewPager1_OnRefresh);this.winGridViewPager1.AppendedMenu = this.contextMenuStrip1;this.winGridViewPager1.ShowLineNumber = true;this.winGridViewPager1.BestFitColumnWith = false;//是否设置为自动调整宽度,false为不设置this.winGridViewPager1.gridView1.DataSourceChanged += new EventHandler(gridView1_DataSourceChanged);this.winGridViewPager1.gridView1.CustomColumnDisplayText += new DevExpress.XtraGrid.Views.Base.CustomColumnDisplayTextEventHandler(gridView1_CustomColumnDisplayText);this.winGridViewPager1.gridView1.RowCellStyle += new DevExpress.XtraGrid.Views.Grid.RowCellStyleEventHandler(gridView1_RowCellStyle);CreateLevelView();RegisterEvent();}GridView grv2 = null;private void CreateLevelView(){var grv = this.winGridViewPager1.GridView1;var gridControl = this.winGridViewPager1.gridControl1;//创建一个从表的GridView对象grv2 = new GridView();grv2.ViewCaption = "记录明细";grv2.Name = "grv2";grv2.GridControl = gridControl;//构建GridLevelNode并添加到LevelTree集合里面var node = new GridLevelNode();node.LevelTemplate = grv2;node.RelationName = "Children";gridControl.LevelTree.Nodes.AddRange(new GridLevelNode[]{node});gridControl.ViewCollection.Clear();gridControl.ViewCollection.AddRange(new BaseView[] { grv, grv2 });//创建从表显示的列 grv2.Columns.Clear();grv2.CreateColumn("ID", "ID").Visible =false; //标识行的关键字,可用于删除处理grv2.CreateColumn("DictType_ID", "DictType_ID").Visible = false;//创建一个字段,隐藏的,存储记录grv2.CreateColumn("Name", "项目名称");grv2.CreateColumn("Value", "项目值");grv2.CreateColumn("Seq", "排序");grv2.CreateColumn("Remark", "备注");grv2.OptionsBehavior.ReadOnly = false;grv2.OptionsBehavior.Editable = true;grv2.DataSourceChanged += grv2_DataSourceChanged;}
以上就是基于GridControl实现数据的主从关系的处理,可以实现多层级的展示,希望这些案例能够对你展示数据有所帮助。
在GridControl表格控件中实现多层级主从表数据的展示相关推荐
- iviewui中表格控件中render的使用示例
示例了如何在表格中显示按钮,如何将代码转化为文字. iviewui新版本中,如果内容转化输出时,如果不使用render函数,会显示不正常.老版本不存在这个问题. <!DOCTYPE html&g ...
- Xceed WinForm数据表格控件Xceed Grid For .NET详细介绍
2019独角兽企业重金招聘Python工程师标准>>> Xceed Grid For .NET是一款高级的,多功能的.扩展性极强的数据表格控件,具有分组.主从表.多种主题外观.固定列 ...
- [转]ExtJS的使用方法汇总—配置和表格控件使用
在网上差一些关于ExtJS的相关资料,看到这篇博客写的不错,拿出来分享一下! 博客文章:ExtJS的使用方法汇总(1)--配置和表格控件使用 ExtJS的使用方法汇总(2) ...
- SpreadJS 纯前端表格控件应用案例:铭天预算执行系统
由武汉铭天信息科技有限责任公司(简称:武汉铭天)为湖北省水利厅研发的"铭天预算执行系统",旨在建立统一集成的网上报销流程,实现局域网多点报销审核与预算控制,以此提高财务审核报销与预 ...
- 【QT开发笔记-基础篇】| 第二章 常用控件 | 2.12 表格控件 QTableWidget
本节对应的视频讲解:B_站_链_接 QTableWidget 是 Qt 中的表格控件,可以行列的形式来展示数据 1. 属性和方法 QTableWidget 有很多属性和方法,完整的可查看帮助文档. 在 ...
- 长江流域取水工程核查登记工作居然采用的是表格控件SpreadJS???
项目背景 开展长江流域取水工程(设施)核查登记工作,是落实长江大保护战略的重要措施,是全面推进水资源强监管的重要抓手,也是深化"放管服"改革的重要基础,对加强长江流域取用水管理,促 ...
- SpreadJS 纯前端表格控件应用案例:医疗行业智能报表系统
由西安几何数字信息技术有限公司(简称:几何数字)推出的医疗行业智能报表系统,通过嵌入纯前端表格控件 SpreadJS,实现了拖拽式操作和丰富的可视化指标体系,可助您轻松自如地完成数据透视分析.自助分析 ...
- DevExpress表格控件(GridView、GridControl)使用小结
GridControl创建表格 1.点击VS"工具箱"的GridControl,在窗体上添加此控件: 2.点击"RunDesigner"按钮,进入表格设计界面, ...
- qt在表格中如何画线_Qt之表格控件蚂蚁线
阅读目录 回到顶部 一.蚂蚁线 摘自互动百科:在图像影像软件中表示选区的动态虚线,因为虚线闪烁的样子像是一群蚂蚁在跑,所以俗称蚂蚁线.在Poshop,After Effect等软件中比较常见. 背景: ...
最新文章
- 赔得比赚得多,职场人年终奖都花哪儿了?
- 第三章 C#程序结构 (3.3 循环结构)
- 双目图像重叠的视差计算_双目视觉(stereo vision)
- HashMap 源码解析(JDK1.8)
- AspectJ在Android中使用(AOP)
- GNS3 VoIP Lab (Cisco 3725 and CME 4.3)
- #抵抗3#(#Resistance 3#) 绝对值得体验的冒险历程
- 关于磁盘爆满异常(Linux下已经删除文件继续占用空间问题)
- 将Freeswitch SDP 固定为 external_rtp_ip
- java常用类之String类
- JSP的九大内置对象
- php自测试卷2,PHP试题网
- 云服务器上硬盘是虚拟的吗,虚拟硬盘映射在主机上使用
- EasyUI的Vue版本
- 术语:游戏机制(Game Mechanics)
- 「BIND9」- DLZ(Dynamically Loadable Zones) @20210212
- python怎么读取石墨表格_用python和柳比歇夫工作法,自动做每周的周总结,导出周小节图表...
- Ubuntu搜狗拼音输入法安装教程(常识)
- java hypot_Java Math类静态double hypot(double d1,double d2)与示例
- 泛函分析笔记06:Lp与lp空间