# 横向纵向组合动态列分组 >横向纵向组合动态列:是指`横向动态渲染`和`纵向动态渲染` >横向动态渲染:是指我们横向把相同分类的合并在一起,是动态数据,如表头:1月到12月,数据可能随时变化,可能没有5月,也可能没有6月,而不是静态数据(设计页面写死的数据) >纵向动态渲染:是指我们纵向把相同分类的合并在一起,与横向动态渲染一致,都是数据动态改变,而不是静态数据 >接下来让我们一起学习如何实现横向纵向组合动态列分组吧 [TOC] ## **特殊规则注意 重要!重要!** >[danger]特别注意:配置横向动态分组要素: 1、目前支持多级表头 ,最多支持3级动态的表头 2、必须有横向分组字段:如本示例中`#{area.groupRight(moth)}` 3、横向分组下必须有`动态列`;动态列数据必须设置成`动态属性 例如 #{area.dynamic(sales)}` 4、动态列数据之前的列字段必须设置成`纵向分组 例如 #{area.group(region)}` 5、数据中第一条`数据必须完整`;例如:期望展示1-6月数据,则第一条数据1-6月必须都有数据。 ## 效果演示 预览地址:https://bootapi.jeecg.com/jmreport/index/631296598256996352 ![](https://img.kancloud.cn/81/5f/815f2125bc2f48cec3930cec04a0a683_1911x980.png) ## 设计步骤 ### 创建一个名为`区域销售统计`的数据报表 > 创建一个区域销售表,有七个字段:ID、区域、省、月份、销售额、捐赠、比例 ![](https://img.kancloud.cn/a3/29/a3294978ba19d67d0d700411c0209f87_940x218.png) #### 1、为`区域销售统计`创建一个SQL数据集 >查询销售区域所有信息 ![](https://img.kancloud.cn/70/43/7043db02e3d0e38be95bfbb28820e6dd_1906x944.png) >部分数据展示 ![](https://img.kancloud.cn/59/7d/597d7f939340bcb484e5d8406b739b15_1907x927.png) #### 2、将我们需要的字段拖拽到设计器页面 >[danger] 注意:这里面有一个交叉报表的设置,详细操作步骤请参考[交叉报表](http://report.jeecg.com/2112709) ![](https://img.kancloud.cn/66/45/66456ef1185bb7257e09e34c9710d3f8_1920x986.png) #### 3、重点来了->如何配置横向纵向动态列 ##### 3.1 设置横向动态列 >点击`#{area.moth}`,在分组设置中,聚合方式选择分组 ![](https://img.kancloud.cn/24/8e/248e0f9b3bb43cb67f181b915da74ce0_1641x902.png) > 我们会发现`#{area.moth}`变成了`#{area.group(moth)}`,并且有向下的箭头,接下来点击扩展参数下拉框,选择横向分组 ![](https://img.kancloud.cn/74/2b/742b01368125706ba2b65ee2284d94bd_1647x900.png) ##### 3.2 设置纵向动态列 >点击`#{area.region}`,在分组设置中,聚合方式选择分组 ![](https://img.kancloud.cn/0e/aa/0eaad73e477b29d50cbb73967096df1d_1643x900.png) >`#{area.region}`变成了`#{area.group(region)}`,并有向下的箭头,聚合方式为纵向 ![](https://img.kancloud.cn/66/66/6666e0d02844f436200b85d81ffc68c9_1633x904.png) >再次点击`#{area.province}`设置成纵向分组 ![](https://img.kancloud.cn/97/15/97159decfd2ae0aaaf8df3b1d32565ea_1653x907.png) ##### 3.3 将不是分组的单元格设置成动态属性 >点击`#{area.sales}`所在的单元格,分组中点击高级配置,选中动态属性 ![](https://img.kancloud.cn/f0/4e/f04e0eb9c716cc7f2ccac2cd0f22b778_1642x905.png) >`#{area.sales}`由`#{area.sales}`变成了`#{area.dynamic(sales)}` ![](https://img.kancloud.cn/79/fd/79fd697c3ead6c59b6d62c9432fa73ec_1654x904.png) >同理将`#{area.gift}`,`area.proportion`也设置成动态属性 ![](https://img.kancloud.cn/22/ad/22addf7c495aad7235b642e254da4d2f_1648x895.png) >保存预览效果展示 ![](https://img.kancloud.cn/55/fd/55fd7563b534ccb5927bd5a2e0a43421_1911x980.png) ![](https://img.kancloud.cn/0f/d4/0fd4f77973ae47c1c9f6a29f9ba2d424_1258x563.png) #### 数据源格式可参考如下 >SQL数据源 ![](https://img.kancloud.cn/63/14/6314c0cb5a9edbeac90f046a90f03c4e_618x178.png) >API数据源 ``` { "data": [ { "region": "华南", "province": "广东省", "moth":"1月", "sales_1": "1062789", "gift_1": "15346", "proportion_1": "15%" }, { "region": "华南", "province": "广东省", "moth":"2月", "sales_1": "1062789", "gift_1": "15346", "proportion_1": "15%" }, { "region": "华南", "province": "广东省", "moth":"3月", "sales_1": "1062789", "gift_1": "15346", "proportion_1": "15%" }, { "region": "华南", "province": "广东省", "moth":"4月", "sales_1": "1062789", "gift_1": "15346", "proportion_1": "15%" }, { "region": "华南", "province": "广东省", "moth":"5月", "sales_1": "1062789", "gift_1": "15346", "proportion_1": "15%" }, { "region": "华南", "province": "广东省", "moth":"6月", "sales_1": "1062789", "gift_1": "15346", "proportion_1": "15%" }, { "region": "华南", "province": "广西壮族自治区", "moth":"1月", "sales_1": "10000", "gift_1": "1000", "proportion_1": "10%" }, { "region": "华南", "province": "广西壮族自治区", "moth":"2月", "sales_1": "10000", "gift_1": "1000", "proportion_1": "10%" }, { "region": "华南", "province": "广西壮族自治区", "moth":"3月", "sales_1": "48887", "gift_1": "3960", "proportion_1": "10%" }, { "region": "华南", "province": "广西壮族自治区", "moth":"4月", "sales_1": "51484", "gift_1": "7440", "proportion_1": "10%" }, { "region": "华南", "province": "广西壮族自治区", "moth":"5月", "sales_1": "10000", "gift_1": "1000", "proportion_1": "10%" }, { "region": "华南", "province": "广西壮族自治区", "moth":"6月", "sales_1": "46388", "gift_1": "4000", "proportion_1": "10%" }] } ```