web表格怎样做得美
发布网友
发布时间：2022-04-23 05:28
共1个回答
热心网友
时间：2022-04-21 08:09
最终效果如下：
如何用web表格控件FineReport做web表格
2
新建表单
点击文件>新建表单，如下图
如何用web表格控件FineReport做web表格
拖入组件
如上图所示的效果图，我们可以看到该表单需要有1个下拉框控件以及对应的1个标签控件和一个查询按钮，还需要一个以表格形式显示数据的报表块和显示图表的图表块，此时，我们确定了需要在表单中添加一个报表块，一个图表块，3个控件。
注：在组件介绍中，我们知道控件即可依附于参数面板组件存在，也可以单独以组件的形式存在，在这里可随意使用哪种形式，效果都一样，那么使用依附于参数面板组件存在的形式。
参数组件
从工具栏中将参数组件拖拽至表单主体中，并将相应的三个控件：下拉框、文本控件和查询按钮拖拽至参数组件中，并设置标签控件的控件值为：客户，如下图：
如何用web表格控件FineReport做web表格
报表块组件
从工具栏中将报表组件也拖拽至表单主体中，如下图：
如何用web表格控件FineReport做web表格
注：如果组件数量过多，在web端展示的时候自适应在一页内显示会比较拥挤，那么此时可以在右侧下方选中整体框架body，在右侧上方的属性表中将组件缩放修改为自适应原样缩放，如下图：
如何用web表格控件FineReport做web表格
充满展现区域：是指在web端展示的时候，所有组件自适应充满整个浏览器页面显示，不出现滚动条；
自适应原样缩放：是指在web端展示的时候根据制作表单时候组件大小比例显示，并不缩放充满整个web页面，如果超过页面大小，会出现滚动条。
其详细显示样式请查看表单样式
图表组件
再从工具栏中将图表组件拖曳至报表块组件的下方，如下图：
如何用web表格控件FineReport做web表格
控件绑定数据
定义数据集
效果图中，新建数据集ds1：SELECT 产品名称,库存量,产品.成本价 ,产品.单价 FROM 订单,订单明细,产品 where 客户ID='${company}'and 订单.订单ID=订单明细.订单ID and 订单明细.产品ID=产品.产品ID，参数company的默认值为VINET,。
注：参数名字必须与客户ID下拉框控件名称保持一致。
客户下拉框控件
选中下拉框控件拖拽到适当位置，下拉框控件名设为“company”，数据字典来自FRDemo数据库的客户表（数据类型选择数据库表，数据库选择FRDemo），实际值和显示值分别为客户ID和客户名称，控件值为VINET：
如何用web表格控件FineReport做web表格
报表块
参数面板与控件都已经设置好之后，点开报表块里面的触笔按钮，进行报表块编辑界面，如下图：
如何用web表格控件FineReport做web表格
新建数据集
效果图中，报表块里面要显示订单明细数据，根据客户ID进行过滤，新建数据集ds2：select * from 订单 where 客户ID='${company}'，company默认值为VINET.
表样设计
如下图所示，设计表样：
如何用web表格控件FineReport做web表格
点击左下角的表单按钮回到表单的设计界面，选中报表块，可在右侧的属性表中设置其报表块工具栏是否可见，如下图：
如何用web表格控件FineReport做web表格
图表块
鼠标选中图表块所在区域，为该图表绑定数据，图表数据源来源于数据集数据源，其分类系列设置如下：
如何用web表格控件FineReport做web表格
条件属性
由于该图表块类型为组合图，即需要通过图表条件属性来修改不同系列的图表类型，如下图，新增一个条件属性，设置当系列序号为3的时候，其坐标轴为次坐标轴，图表类型为折线图：
如何用web表格控件FineReport做web表格
13
注：设置条件选择系列序号的时候需要与数据绑定时的数据列顺序相匹配，在上图设置图表数据时，库存量、成本价和单价的系列序号依次为1、2、3，条件属性主要是设置库存量系列用柱形图展示，成本价和单价用折线图展示并使用次坐标轴。在添加一个组合图时，会默认添加2个条件属性，详细请查看组合图
到此为止，表单就已经制作好了。
