历史版本12 :卡片分栏 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
实际应用中会有如下图的情况：需要将查询出的信息以卡片的形式在页面显示，每个卡片均有大标题和表头，并且各卡片之间有空行或空列进行分割。
这又该如何进行分栏实现呢？
2. 操作步骤编辑
2.1 数据准备
新建一张模板，新建数据集ds1：select * from 雇员
2.2 模板设计
如下图所示，将数据列拖入相应单元格。
由于每个员工卡片都包括大标题和表头，各卡片之间均有空行和空列进行分割，并且员工卡片是根据“员工ID”列进行纵向排序扩展的。所以：
1）数据单元格纵向扩展：以“雇员ID”所在单元格B2作为标准，设置纵向扩展；其他数据单元格（B3、B4、B4、C2）设置父格为B2；
2）表头单元格扩展：大标题A1单元格和表头单元格（A2、A3、A4、A5）均设置父格B2；
3）卡片间分割空白扩展：卡片之间有分割行和列，所以设置分割空白行的首个单元格A6和分割空白列的首个单元格D1的父格为B2。
预览效果如下：每个卡片有完整的信息，并且卡片之间有空白分割行。
2.3 分栏设置
上述模板预览效果可以看出该模板是纵向扩展，故分栏选择行分栏。
上述模板设计中可以看出，每一位员工信息占了6行4列（包括卡片和下方空白分隔行及右侧空白分割列）：第一行是大标题行，第一列是表头列，但由于每条卡片都带有大标题和表头，故可以将大小标题看成是数据的一部分，所以是6行4列，而不是5行3列。
若我们希望每栏显示5位员工信息，则需要设置每栏30行（6行*5卡片=30行），超过的到下一栏(卡片是纵向扩展，故下一栏是指下一列)显示，以此类推。
在菜单栏中，选择模板>报表分栏，设置为行分栏，超过30行时进行分栏，参与分栏的数据从左上角的A1(大标题开始的单元格)到右下角的D6，故在分栏数据中填写A1:D6，因为大小标题行已经作为分栏数据，所以重复行序列为空，如下图：
3. 效果预览编辑
3.1 PC端预览效果
保存模板，选择分页预览，实现效果如上图。
注：只支持分页预览。
3.2 移动端预览效果
1）APP
2）H5
4. 已完成模板编辑
模板效果在线查看请点击：卡片分栏.cpt
已完成的模板可参考%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\卡片分栏.cpt。