LayuiAdmin日期弹框控件,获取数据库日期并动态显示

实现的功能:
使用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) {
                    ......//将当天的数据显示在页面上
					}
				})
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值