项目需求
按照地区筛选时,大屏对应的项目进行精准匹配显示数据;点击对应图表的(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!