xinglie / report-designer

⚡打印设计、可视化、标签打印、编辑器、设计器、数据分析、报表设计、组件化、表单设计、h5页面、调查问卷、pdf生成、流程图、试卷、SVG、图形元素、物联网、标签纸
https://xinglie.github.io/report-designer/
902 stars 232 forks source link

数据-列表格 #24

Closed xinglie closed 7 months ago

xinglie commented 3 years ago

该表格元素支持与数据源中某些字段绑定,在需要对报表打印时使用

第1步,添加”列表格“元素到编辑区 image

第2步,点击工具栏右侧的”数据源“面板或使用快捷键数字3(数据源面板目前默认关闭状态)

第3步,在”列表格“元素选中的情况下,可以在数据源面板上方选择要使用的数据源,该数据源需要与后端接口配合,示例中是写死的一份JSON数据。

根据提示,在数据源下拉框中选中一份数据源,则下方显示该数据源可供使用的字段

image

此时可以拖动1中的字段到右侧属性面板中2的区域中,即完成了列的绑定。

已添加过的列目前置灰,不允许重复添加(可不做这个限制)。 当需要删除时,把2中的字段拖出2区域松开鼠标即可删除。其中2区域中的绑定字段支持拖动排序,同时拖动添加时,也可以直接把需要的列放置到想要的位置上

image

编辑区”列表格“绑定数据源后显示如上

当列表格绑定的字段来源不是一个数据源时,会自动清空之前数据源的字段,所以当你想换一个数据源时,不必自己清空绑定的字段,只需要把新数据源的字段直接拖过来即可

打印

当”列表格“绑定的数据源数据较多时,在设计区只会尽可能的显示能够显示的数据。 点击右上方的打印页面时,在打印页面会根据数据源数据的多少,自动排版分页,显示完整的待打印数据。