练习题目
1.
题目描述:根据本节课学习的参数功能点&图表内容完成基本的数据查询效果与联动分析效果。
具体效果如下:
涉及数据源部分:内置数据库中的“销量”数据库表,
实现效果:通过参数下拉地区查询对应地区的销量数据,同时以图形化做数据展现。
图形标题进行动态显示当前选择的参数。饼图与柱形图之间满足联动分析,点击对应的产品类型进行各销售员销量数据查看。
整体配置:
控件数据字典:
饼图:
柱状图:
为柱状图配置网格线:实线样式
效果:
2.
题目描述:实现关联填报。
具体效果如下:
涉及数据源部分:内置数据库中的“订单”,”订单明细”,‘运货商’,‘客户’,‘雇员’,‘产品’数据库表,
实现效果:
1,订单号实现默认获取数据库中的最大编号+1进行填充。
2,运货商;客户id;雇员id;产品号通过下拉框实现,且不能自定义数值。且选择之后显示对应公司名称,雇员姓名,产品名称。
3,应付金额必须小于运货费。
4,订单信息部分内容填报到订单表,订单明细填报到订单明细表。两个数据库表之间的关联字段为‘订单id’。
5,订单明细可以进行多行插入产品信息;且订单明细部分序号动态递增。
最大编号+1进行填充:
显示对应公司名称,雇员姓名,产品名称:
应付金额必须小于运货费:
两个数据库表之间的关联字段为‘订单id’:
动态递增:
效果:
3.
模板效果:
实现功能:
可以选择数据库中存在的所有年份(单选)
可以选择对应年份下数据库中存在的所有月份(复选,参数为空选择全部)
根据单选按钮组选择统计出该年下每个月的订单总数、已付订单数量、未付订单数量
销量与订单数量用柱形图展示
使用数据:
FRDemo中的订单与订单明细
外观设置:
动态的获取年份信息
控件的配置:需注意,控件的名称要和在sql语句里面设置的参数名称一致
柱形图配置:开启主要刻度线,按照题目的样式添加网格线
选择自定义柱形图
ds1: 复选月份使用 in(p1,p2...) 是否已付用 like "%%" 可显示已付和未支付的订单 不要设置默认值
ds2:
ds3:根据选择的年份信息,算出该年中有哪些月份有订单
效果:
4.
模板效果:尝试在移动端展示
主模板:
点击订购日期可以改变排序方式
点击订单号可以选择钻取到子模板1(物流信息)和子模板2(订单明细)
使用数据:
FRDemo中的S订单 表
子模板1(物流信息):
使用数据:
FRDemo中的S订单 表
子模板2(订单明细):
使用数据:
FRDemo中的S订单明细 表
在移动端展示首先需要配置防火墙!
后面一直下一步
外观设置:
主表ds1:
物流信息表-子表ds1,带个参数:
订单明细表-子表ds1,带个参数:
点击订购日期⇵,切换按日期的排序方式:
实现隔行换色:
给订单明细表除订单号以外的字段分别设置隔行换色:
给订单号添加两个超链接:
效果:
5.
模板效果:
利用开始日期和结束日期来筛选数据;
可以改变排序方式;
默认开始日期为当前月第一天,结束日期为当天;
点击前一天按钮可以将开始日期和结束日期同时减一天并查询数据;
点击后一天按钮可以将开始日期和结束日期同时加一天并查询数据;
结束日期无法小于开始日期;
使用数据:
FRDemo中 订单、订单明细 表
外观设置:
ds1:一共 3个参数,实现根据开始日期和结束日期来筛选数据,可以设置排序方式
设置开始日期为当前月份第一天,结束日期为当天
点击前一天按钮可以将开始日期和结束日期同时减一天并查询数据;点击后一天按钮可以将开始日期和结束日期同时加一天并查询数据;
点击前一天和后一天使用JS实现:(后一天按钮同理)
var start = this.options.form.getWidgetByName("开始日期").getValue();
var end = this.options.form.getWidgetByName("结束日期").getValue();
var startdate= new Date(start);
var subdate= new Date(end);
startdate.setDate(startdate.getDate()-1);
subdate.setDate(subdate.getDate()-1);
this.options.form.getWidgetByName("开始日期").setValue(startdate);
this.options.form.getWidgetByName("结束日期").setValue(subdate);
!特别注意的是!题目上提到的点击前一天、后一天按钮之后看到日期变化并查询数据
我自己研究出了特别的办法:
将查询按钮复制两个,分别改名前一天、后一天。为他们添加点击事件,写入以上js代码。能看到效果:点击前一天后,日期发生改变,报表部分也同步刷新。
题目上提到的点击前一天、后一天按钮之后看到日期变化并查询数据
结束日期无法小于开始日期:
使用js判断
var start = this.options.form.getWidgetByName("开始日期").getValue();
var end = this.options.form.getWidgetByName("结束日期").getValue();
if( start == "" || start==null){ //判断开始日期是否为空
alert("错误,开始日期不能为空"); //开始日期参数为空时提示
return false;
};
if(end == "" || end==null){ //判断结束日期是否为空
alert("错误,结束日期不能为空"); //结束日期参数为空时提示
return false;
};
if( start > end){ //判断开始日期是否大于结束日期
alert("错误,开始日期不能大于结束日期"); //开始日期大于结束日期时提示
return false;
}
效果:
同时加一天和减一天