关于laydate参数动态修改的实现

讨论 已结
12 1822
岁月小偷
悬赏:50飞吻
很经常遇到的问题貌似也没有一个特别好的解决方案。我以前也发过一个帖子是添加一个reload的来更新里面的参数,但是发现没想象的那么简单,实现起来太蹩脚了。
其实一个很正常的逻辑应该就是类似于table.reload一样laydate应该也是需要一个可以更新一些属性的功能的,目前有这个想法的同学估计绝大部分会试一下重新render一下,结果大失所望,没有半点作用。但是我追了一下代码,其实后面render的时候组件也跟第一次render一样做了n多操作,包括各种解析初始化等等,但是!!有两个问题导致了后面render出来的没有效果。所以解决掉这两个问题也就可以通过再次render来动态更新控件的配置信息了。
效果图(测试代码: https://pan.baidu.com/s/1lwbbvEndUIJpQz3lIJo84g


问题一:设置唯一KEY

疑问:既然可以再次render有初始化,为什么到了设置这个唯一key的时候如果以前render设置过了就out了不重新设置为最新的key??这个就像要和女朋友去旅游买了很多东西最后上飞机的时候什么都没带。源码改动1

问题二:事件绑定

疑问:做了那么多初始化等等的工作,最后检查一下前面是不是eventHandler,如果有就不绑定事件了~~这个,还是拿计划和女朋友去旅游的事吧,万事具备之后才发现自己没有女朋友,源码改动2(红框内容)。绿色框的本来想着给事件先off然后on,结果发现不起作用,所以多次render之后点击一次会依次弹出,最近忙就不去看怎么删除以前的过期的控件了,加了一个判断看控件的index跟当前dom保存的唯一key是否一致,是的情况下再render渲染出来。
回帖
  • [赞]
    0 回复
  • 补充修改

    今天测试的时候还发现上篇漏了一个处理

    有特殊需求的可以下载测试代码下来看看,里面包括一个基于2.3.0版本的laydate的源码对应的修改的laydate.js。但是还是那句话这个修改是一个双刃剑,得有一定的了解才能用好,用的不好可能会导致弹出来的laydate异常。就看怎么使了。
    1 回复
  • 0 回复
  • Th_omas
    2018-11-8
    @岁月小偷 有季度的实现方法么
    0 回复
  • @Th_omas 有戏,如下:
    0 回复
  • Th_omas
    2018-11-8
    @岁月小偷 有代码么
    0 回复
  • @Th_omas 要不我整理到laydatePro里面吧,不过也有不少细节需要处理的,比如类型要定义新的还是多加一个子类型,然后值就是第n个季度还是,然后还有一个就是minmax的应该如何设置这些细节的处理。相关代码先给你看看:


    laydate.render({
    elem: '#date1',
    type: 'month',
    format: 'yyyy年M季度',
    // range: '~',
    // isInitValue: false,
    change: function(value, date, endDate){
    var elem = $(this.elemCont);
    layui.each(elem.find('.laydate-month-list').find('li'), function (index, monElem) {
    monElem = $(monElem);
    var monthTemp = parseInt(monElem.attr('lay-ym'));
    if (monthTemp < 4) {
    monElem.html(monElem.html().replace(/月/g, "季度"));
    } else {
    monElem.hide();
    }
    });
    if (!$(this.config.elem[0]).val()) {
    // 默认的选择这个月和下个月所处的季度
    layui.each(elem.find('.laydate-month-list').find('li.layui-this'), function (index, monElem) {
    monElem = $(monElem);
    // 获得选中的月份
    var month = parseInt(monElem.attr('lay-ym'));
    var quarter = Math.round((month + 1)/4);
    monElem.removeClass('layui-this').closest('.laydate-month-list').find('li[lay-ym="'+quarter+'"]').addClass('layui-this')
    });
    }
    },
    ready: function (date) {
    var elem = $(this.elemCont);
    layui.each(elem.find('.laydate-month-list').find('li'), function (index, monElem) {
    monElem = $(monElem);
    var monthTemp = parseInt(monElem.attr('lay-ym'));
    if (monthTemp < 4) {
    monElem.html(monElem.html().replace(/月/g, "季度"));
    } else {
    monElem.hide();
    }
    });
    if (!$(this.config.elem[0]).val()) {
    // 默认的选择这个月和下个月所处的季度
    layui.each(elem.find('.laydate-month-list').find('li.layui-this'), function (index, monElem) {
    monElem = $(monElem);
    // 获得选中的月份
    var month = parseInt(monElem.attr('lay-ym'));
    var quarter = Math.round((month + 1) / 4);
    // monElem.closest('.laydate-month-list').find('li[lay-ym="'+quarter+'"]').addClass('layui-this')
    monElem.closest('.laydate-month-list').find('li[lay-ym="' + quarter + '"]').click();
    });
    }
    },
    done: function (value, date, endDate) {
    var ele = $('#data1');
    if (date.month > 0 && date.month < 5) {
    ele.attr("startDate", date.year + "-" + date.month)
    }
    if (endDate.month > 0 && endDate.month < 5) {
    ele.attr("endDate", endDate.year + "-" + endDate.month)
    }
    }
    });
    0 回复
  • Th_omas
    2018-11-9
    @岁月小偷 没显示出来[泪]
    0 回复
  • @Th_omas 嗯嗯,这个修改得改一个源码或者不改源码的话得变通一下,我贴出来的是将进入这个回调的时候this指向了这个laydate的实例,如果不改的话里面的逻辑就有问题了,但是如果你只是为了处理这个的话也不用这样子做,主要的思路就是根据当前的这个input的lay-key然后得到打开的这个div的
    input上的lay-key

    对应打开的

    绿箭头处是固定的,加上input中的lay-key就是这个弹出的laydate的id了
    0 回复
  • Th_omas
    2018-11-9
    @岁月小偷 不是很理解[泪] [泪]
    0 回复
  • @Th_omas 我给你改一下给你看看,你可以debugger一下你这个ready的回调中this是什么应该是这个laydate的config,所以this.elem应该就是原始的input,有了这个input就能得到里面的lay-key,然后找到id是layui-laydate + key就能得到弹出的这个laydate的dom节点了,下面的逻辑就不变了。
    0 回复
  • Th_omas
    2018-11-9
    @岁月小偷 哦哦
    0 回复