如何制作区域联动(efreport.com)

课程二十二:如何制作区域联动

说明:对于区域联动,主要是用来在同一个页面,依据主报表中的数据,获取更详细的信息以图表的形式在同一个页面显示出来,用于参考

步骤一:创建一个子报表(参考课程二十一:子报表的制作)

步骤二:在sheet1表格中添加数据源,在数据源区点击,在弹出来的数据集获取语句获取中输入:select * from 销量,加入销量表加为数据源ds1。

在工作栏中做出表格,我们把需要的数据集从左边的数据源区拖入工作区,给列上面标明列的名册,给单元格加边框,单元格居中,效果如下图。

新建一个模板参数p1,默认值为’孙杰’,类型为‘字符串’(参考模课程:十五)

步骤三:在需要传递数据的地方,右键选择“区域联动”,

 

在区域联动设置中,先选择“主表单区域选择”中的下拉框选择 联动区域,点击可以添加一个区域联动,在左侧选中添加的区域单元格,在右侧设置模板参数

选择子报表

 

在sheet2表格中添加数据源,在数据源区点击,在弹出来的数据集获取语句获取中输入:select * from 销量 where 销售员=@{p1},加入销量表加为数据源ds2。

我们可以点击工具栏里面的,可以进行预览。

 

在子报表中插入图表,并设置属性

 

我们可以点击工具栏里面的,可以进行预览。

 

步骤四:保存

点击文件菜单栏保存模板,模板命名为区域联动。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
省市区三级联动city.js是一个常用的前端插件,用于实现省、市、区三级联动选择功能。用户可以根据自己的需求,通过下载并引入city.js文件,轻松实现省市区三级联动的选择功能。 下载city.js文件的方式有多种,可以通过在搜索引擎中搜索相关关键词,找到可靠的下载来源进行下载。一般来说,可以在一些前端插件网站、技术论坛或开源代码库中找到相应的下载链接。 下载好city.js文件后,需要在HTML文件中引入该文件。可以通过使用`<script>`标签引入,具体的引入方式如下: ```html <script src="path/to/city.js"></script> ``` 其中,`path/to/city.js`替换为你实际下载的city.js文件的路径。 引入city.js后,你需要在HTML中创建相关的省、市、区的`<select>`元素,并为其设置一个唯一的id。接下来,通过调用city.js提供的方法,将省、市、区的`<select>`元素与city.js进行绑定,从而实现三级联动的效果。 通常,你可以使用如下的方式来使用city.js: ```javascript var provinceSelect = document.getElementById("province"); var citySelect = document.getElementById("city"); var areaSelect = document.getElementById("area"); citySelect.options.length = 0; // 清空城市选择器的选项 areaSelect.options.length = 0; // 清空区域选择器的选项 // 初始化省级选择器 provinceSelect.options.add(new Option("请选择省份", "")); for (var p in provinceList) { provinceSelect.options.add(new Option(provinceList[p], p)); } // 当省份选择器的值改变时,动态加载对应的市级选择器选项 provinceSelect.onchange = function () { citySelect.options.length = 0; // 清空城市选择器的选项 areaSelect.options.length = 0; // 清空区域选择器的选项 if (provinceSelect.selectedIndex == 0) { return; // 未选择省份,则不处理 } var cities = cityList[provinceSelect.value]; // 获取对应省份的城市列表 for (var c in cities) { citySelect.options.add(new Option(cities[c], c)); } }; // 当城市选择器的值改变时,动态加载对应的区域选择器选项 citySelect.onchange = function () { areaSelect.options.length = 0; // 清空区域选择器的选项 if (citySelect.selectedIndex == 0) { return; // 未选择城市,则不处理 } var areas = areaList[provinceSelect.value][citySelect.value]; // 获取对应省市的区域列表 for (var a in areas) { areaSelect.options.add(new Option(areas[a], areas[a])); } }; ``` 以上就是使用city.js实现省市区三级联动选择功能的基本步骤。根据实际需求,你可以对city.js进行个性化的定制,如修改选项的样式、添加默认值等。在完成以上步骤后,你可以通过测试页面来验证是否成功实现了省市区三级联动选择功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值