Echarts实战案例代码(13):使用layui弹出模态框通过localStorage跨页面函数传递参数

项目需求

按照地区筛选时,大屏对应的项目进行精准匹配显示数据;点击对应图表的(N)按钮时,弹出图表也相应的显示对应的地区图表;
在这里插入图片描述
在这里插入图片描述

项目分析

源码分析

<div class="boxall" style="height:240px">
  <div class="alltitle">月收入分布<span class="laybg new6">N</span></div>
      <div class="navboxall" id="income"></div>
 </div>

1.在layui弹出模态框模态框,是没有url链接的,无法使用get形式,即index.php?m=Index&a=gender&township=XX镇的方式传递;
2.如果按照方式1解决,选择框状态改变时,如何同步在不刷新的情况将"XX镇"传给按钮,无解。

localStorage参数

在后端传递参数时,可以选择get、post、cookie和seesion等四种方式,layUI下,get和post方式被直接PASS。JavaScript有cookie和seesion的传递函数吗?

localStorage 创建一个本地存储的 name/value 对,name=“lastname” value=“Smith”, 然后检索 “lastname” 的值,并插入到 id=“result” 的元素上。

1.参数存储;

localStorage.setItem("data", township);

2.参数获取;

localStorage.getItem("data");

解决方案

  • 主页面根据点击事件,储存数据:
        //删除本地储存,防止缓存数据;
        localStorage.removeItem("data");
        
   //按照区域选择对应函数;
        $("#btn").click(function () {
            var township = $('.township').val();
            if (township == "陵城区") {
                window.location.reload();
            } else {
                localStorage.setItem("data", township);
                getAllData(township);
            }
        })
  • 子页面接受参数,并调用封装方法渲染图表:
     //调用核心图表;
        $(function () {
            var township = localStorage.getItem("data");
            getGender(township);
        })

Done!

已标记关键词 清除标记
相关推荐
超级大屏幕 查看更多关于 超级大屏幕 的文章 具有开幕墙、闭幕墙、消息墙、抽奖、签到、嘉宾展示、抢红包功能,利用开幕墙对整个活动的展示介绍、也适合活动进行中的间歇时间、消息墙可以再等待和互动的时候,让员工发布消息,是一款非常流行的微信大屏幕系统。 重要说明:付费报名模式目前只支持开通微信支付的服务号。 1、本模块支持开幕墙、闭幕墙、消息墙、二维码扫描墙、3D签到墙(支持logo签到和文字签到)(4种展示效果)、多奖品切换现场抽奖、酷炫互动疯狂抢红包、嘉宾墙等,后续将再新增多个墙,敬请期待; 2、每个大屏幕都支持自定义背景、和背景有音乐功能,购买的客户将免费赠送背景素材包; 3、现场抽奖奖品支持同时设置多个奖品,并且可以设置每个奖品的顺序,方便根据奖品价值安排抽奖顺序,奖品支持实物和红包(); 4、抢红包奖品支持实物、微信卡券、红包等,支持自定义奖品数量、概率等; 5、抢红包支持设置每个人最多中奖次数、超过了就不会再中奖了; 6、抢红包活动支持设置赞助商广告,粉丝的中奖提示页面弹出赞助广告; 7、抢红包活动支持多波活动举办,支持一波活动结束后直接重置,之前中奖的数据不会被清空,后台和中奖者手机端都可以看到并且兑换红包。 8、红包奖品支持直接发送和提现两种模式,方便做大额红包奖励。 9、3D签到墙支持4种展示方式,前后台都可以自由切换,手机端签到可以支持是否需要填写个人信息,个人信息支持填写姓名、手机、公司/职位等; 10、大屏幕支持设置密码才能访问的功能; 11、消息墙支持开启是否需要消息审核的功能,支持同时发生消息和图片的功能,并且支持图片再显示的时候是否自动放大功能。 12、后台支持自定义活动流程说明,方便参与者再手机端直接查看活动流程。 13、支持开启和关闭强制关注才能参与活动的功能; 14、自带LBS限制地区功能,可以设置参与人的地区范围; 15、本模块只支持认证服务号使用使用红包功能必须开通微信支付),其他非认证服务号的可以借用权限(借用权限的账号无法使用卡券功能);
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页