DevExpress GridView行记录中嵌套CardView

效果图:

图一是一个AdvBandedGridView,为表头设置了两个Band,分表是Public(共有信息)和private(私有信息);并且将表头分为了两列

图二是点击图一左边的加号显示而来。方框中的数据是与图一行记录有关键关联的另一张表的数据,并且以卡片的形式显示出来

图三是点击图二的搜索按钮出现的。整个页面显示的是张三这条数据关联的所有数据;也可以点击Customize按钮进行自定义显示

DevExpress GridView行记录中嵌套CardViewDevExpress GridView行记录中嵌套CardView

DevExpress GridView行记录中嵌套CardView

功能实现:

第一步右击项目选择“Add DevExpress Item”->"Form",命名为“AdvBandedViewDemo2”

第二步 从工具栏中拖拽一个GridControl,设置在父容器中停靠

第三步 将GridControl转换成AdvBandedGridView

DevExpress GridView行记录中嵌套CardView

第四步 配置DataSource

"添加项目数据源"->“数据库”->"数据集"->配置数据源->选择图二中的tb_userinfo(主表),完成

DevExpress GridView行记录中嵌套CardViewDevExpress GridView行记录中嵌套CardView

第五步 为表头设置Band

选中GridControl->Run Designer->选择左边菜单栏Main下面的Bands->Add New Band

修改Caption属性值,即Band的名称

将roleid和userstate拖拽到public下面,将userpwd脱拽到private下面

DevExpress GridView行记录中嵌套CardViewDevExpress GridView行记录中嵌套CardView

第6步 添加行记录的CardView

在数据源的tb_userinfo上右击选择"使用向导配置数据源"->选择图2的tb_order表(tb_userinfo表的userid和tb_order表是外键关联关系)

点图三的"Retrieve Detail",选择弹框的"是"(重新配置数据源)

点图四的红框部分,选择“CardView”

图5中在左边的工具栏中查找tb_orderTableAdapter(表名+TableAdapter),将该控件拖拽到GridControl中

双击GridContril,在Form的事件中将数据填充到图5拖拽的控件中,代码见图6

DevExpress GridView行记录中嵌套CardViewDevExpress GridView行记录中嵌套CardView

DevExpress GridView行记录中嵌套CardViewDevExpress GridView行记录中嵌套CardView

DevExpress GridView行记录中嵌套CardViewDevExpress GridView行记录中嵌套CardView