实现的功能:
使用Layui日期弹框控件,将后台获取到的数据库的所有日期,动态展示在前端。
1. 即可将数据库有数据的那一天,展示在前端,方便用户查看。
2. 选中某一天后,页面会加载出当天的数据信息。
关键代码
大致流程
1.页面加载日期控件时,会先从中layuiAdmin中localStorge中查找一个叫selectedDate的表,如果selectedDate值为空,就会重新创建一个名为‘selectedDate’,值为“当前选中的日期”。
2.当用户切换日期时(即当前选中的日期和上一次选中的日期不一样),会重新创建一个名为‘selectedDate’,值为“当前选中的日期”的表,覆盖之前存的同名表。
layui.use(['admin', 'laytpl', 'jquery', 'layer', 'laydate'], function () {
var setter = layui.setter
, admin = layui.admin
, laytpl = layui.laytpl
, layer = layui.layer
, form = layui.form
, $ = layui.$
, laydate = layui.laydate;
var myLaydate;
var mark = {};
//日期弹框控件
myLaydate = laydate.render({
elem: '#test-laydate-theme-molv'//指定元素
, theme: 'molv'//墨绿主题
, value: layui.data('layuiAdmin').selectedDate//初始赋值
, btns: ['confirm']//只出现确定按钮
, mark: mark//自定义标记日期
, done: function (value, date) { //选中后的回调
//写入选择的日期,localDate是上一次选中的日期,value是当前选中的日期
var localDate = layui.data('layuiAdmin').selectedDate;
if (localDate == null || localDate != value) {//将选中日期存入localStorge中
layui.data(setter.tableName, {
key: 'selectedDate'
, value: value
});
}
window.location.reload();//重新加载当前页面
}
});
//请求登入接口,动态是指日期控件的mark
admin.req({
url: '/getAllDate' //获取积水日期
, data: {}
, method: "get"
, done: function (res) {
for (var i = 0; i < res.data.length; i++) {
console.log(res.data[i].formatTime);
mark[res.data[i].formatTime] = '';//js中写json数据的格式,不要写成mark["'"+res.data[i].formatTime+"'"] = '';
}
console.log(mark);
myLaydate.config.mark = mark;
}
});
}
})
Tip: 关于layui.data 数据操作有疑问,可以看看这个
https://www.cnblogs.com/liujie-php/p/13265481.html
数据显示部分的关键代码:
从内存中取出‘将当前选中的日期’,并将值赋给selectedDate,使它作为参数传给后台,后台再进行数据库操作,将需要的数据返回给前端加载出来。
function show() {
$.ajax({
url: '/getLevel1Info',
type: 'POST',
dataType: 'json',
data: {"selectedDate": layui.data('layuiAdmin').selectedDate}, //从浏览器缓存中获取selectedDate的值,传给后台
success: function (data) {
......//将当天的数据显示在页面上
}
})
}