写给还在为时间控件渲染出问题而挣扎的同学

讨论 已结
30 1471
岁月小偷
悬赏:50飞吻
最近也遇到几个说时间控件设置出问题,没弹出或者闪退的问题,把自己的经验分享给有需要的小伙伴额,高手无视或者有更好的方案请不吝赐教哈[嘻嘻]
一般出现这个问题的原因就是采用elem:‘#id’或者其他的".class"这样去渲染一个,我一开始也是这么认为的以为定义一个统一的class然后一次渲染所有就o了,但是也是后面的闪退,追了源码才知道原因。所以后面整改了也强烈的不建议大家采用elem设置成dom节点的id或者class这种形式,因为据我的理解laydate从设计上压根就不支持渲染一类dom的功能,所以这种写法完全没有作用而且容易出现有多个dom匹配到的时候后面的节点出现闪退的情况,还遇到如果前面已经出现了闪退了,再渲染一个也存在“问题”的dom那么这回连闪退都没有看到,不知道是太快了还是压根没出来,这个就没有去验证是那种情形了。反正就是异常现象。具体解决方案看测试代码吧,放百度云上了 https://pan.baidu.com/s/17kuBw1QVIMjVnF8QPHthNA ,社区的编辑器写的代码有时候会遇到被转换了的情况。避免不必要的时间精力的浪费来回折腾。有兴趣的同学可以下下来看看,换个路径,跟layui版本关系不大。不要太古老就行估计。

页面有3个测试按钮,一开始页面是没有初始化控件的,需要点击第一个按钮才会去渲染当前的两个input,这时候就会出现第二个input点击控件闪退的问题。黄色的按钮和红色的按钮都是有问题的。绿色的没问题,而且可以一直追加测试。有什么问题欢迎反馈。希望有所帮助少走弯路。
回帖
  • 洪点
    2018-6-6
    学到了 [good]
    0 回复
  • 0 回复
  • spsyche
    2018-7-31
    给你点赞[good]
    0 回复
  • @spsyche 谢谢[嘻嘻]
    0 回复
  • linq1018
    2018-7-31
    @岁月小偷 借个楼,请问下有没有什么好的方法能获取表格的标题跟数据啊,jq each老是会多获取一些不要的东西

    0 回复
  • @linq1018 你要的是?遍历表格的表头和tbody里面的内容吗?这个一般就是遍历,然后jq的each没怎么使用过,一般是自己写for循环,还有layui.each这个是对jq的each进行的封装,平时用这样也挺多的,没遇到说会把一些不要的东西也给遍历到的情况额,关键看代码是怎么写的还有你说的不要的东西是啥?有没有这几个的截图看看额
    0 回复
  • spsyche
    2018-7-31
    @岁月小偷 大佬就是NB啊,已经可以显示日期框了
    0 回复
  • @spsyche [嘻嘻] 那就好
    0 回复
  • linq1018
    2018-7-31
    @岁月小偷 可能我写的有问题,因为有的时候当前页面有2个或者多个表格,不好去区分。或者说你那里是怎么遍历的,能贴下代码给我看下吗?我都快被这个搞蒙了
    0 回复
  • @linq1018 嗯嗯,遍历其实关键问题是要把遍历的对象找对了,比如我要遍历当前表格下面的某一类输入框比如需要渲染成时间控件的这个,首先要确定得是当前的table下,所以不能是$('input.myDate')这样子显然会把不是我要的范围内的节点都给找到,然后就是如何确定当前表格的问题,这个可能各个框架的组件出来的都稍微不同,的具体分析,比如这个layui的table他会在原始的table的后面追加一个我们看到的表格,姑且叫表格视图吧,这个不是在原始表格里面的,所以我们要遍历的实际上是原始表格的next()这样才能遍历到东西。

    这个只是我遍历的一个场景,不知道能不能解惑,跟你的问题对的上号不。
    0 回复
  • linq1018
    2018-7-31
    @岁月小偷 我获取到的是这些,然后也会获取到比如说表格停靠的多余数据,怎么把它过滤掉,简单来说,我只想获取到表格的所有显示的数据,标题跟内容

    0 回复
  • 这个一个估计只能在设置col的是给td th添加一个样式之类的,然后后面find的时候把存在这些样式的节点给去掉。

    但是实际上表格没有提供这个可以给th或者td添加class的设置,是我自己修改源码添加上去的。

    然后在生成excel或者需要去掉过滤掉这些字段的时候就能派上大用场了。
    0 回复
  • linq1018
    2018-7-31
    @岁月小偷 哎呀,这表格搞得脑壳痛,其实我就像把表格数据取出来,然后做导出功能,哎!
    0 回复
  • @岁月小偷 大佬,当body高度100%,子元素超出显示滚动条时,laydate控件不能吸附在指定元素周围,该怎么办,求大佬。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    </head>
    <style>
    html,body{
    width: 100%;
    height: 100%;
    }
    .one{
    width: 100%;
    height: 100%;
    overflow: auto;
    }
    </style>
    <body>
    <div class="one">
    <div style="height:2000px;">
    <div class="layui-inline">
    <label class="layui-form-label">日期选择</label>
    <div class="layui-input-inline">
    <div class="zlit-date-range">
    <input type="text" class="layui-input" id="date11" placeholder="yyyy/MM/dd">
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    <script>
    layui.use('laydate', function() {
    var laydate = layui.laydate;
    //日期选择
    laydate.render({
    elem: '#date11', //绑定容器
    format: 'yyyy/MM/dd', //自定义格式
    theme: '#108EE9', //自定义颜色主题
    done: function(value, date){
    console.log(value); //得到日期生成的值,如:2017-08-18
    console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    }
    });
    });
    </script>
    0 回复
  • @前端小菜鸡 嗯嗯,测试了你给的代码确实有这个问题,但是其实你只要把html的宽高限制给去掉就可以了,而且整体效果跟你之前也没区别。


    0 回复
  • @岁月小偷 因项目中需要html,body的高必须是100%,所以才这么写的示例,不过刚社区有朋友帮我已经解决了这个问题了,html,body的高度没改,在示例中.one元素加了相对定位属性,然后在时间控件的回调ready中把插入位置换成了.one
    layui.use('laydate', function() {
    var laydate = layui.laydate;
    //日期选择
    laydate.render({
    elem: '#date11', //绑定容器
    format: 'yyyy/MM/dd', //自定义格式
    theme: '#108EE9', //自定义颜色主题
    ready: function(date){ //控件初始打开的回调
    $('.one').append($('#layui-laydate1'));
    },
    done: function(value, date){
    console.log(value); //得到日期生成的值,如:2017-08-18
    console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    }
    });
    谢谢大佬耐心回答,受教了[太开心]
    0 回复
  • @岁月小偷 ........要的就是这节。。。大佬你又在不知不觉中帮了我[泪] 感人!
    0 回复
  • 0 回复
  • 小cc
    2019-2-18
    在弹框中,时间插件显示不正常呢, 时间插件显示在了插件下方,被覆盖了
    0 回复
  • 小cc
    2019-2-18
    @岁月小偷 大佬给看下呗
    0 回复
  • @小cc 额,没遇到过这种现象额,看下你是怎么layer和在哪laydate.render的
    0 回复
  • 小cc
    2019-2-18
    var content = '<form class="layui-form" action="">' +
    '<div class="layui-form-item">' +
    '<label class="layui-form-label">广告名称</label>' +
    '<div class="layui-input-block">' +
    '<input type="text" name="adName" value="'+ data.title +'" style="width:90%" disabled class="layui-input">' +
    '</div>' +
    '</div>' +
    '<div class="layui-form-item">' +
    '<label class="layui-form-label">渠道名称</label>' +
    '<div class="layui-input-block">' +
    '<input type="text" name="channelName" value="'+ data.channel_name +'" style="width:90%" disabled class="layui-input">' +
    '</div>' +
    '</div>' +
    '<div class="layui-form-item">' +
    '<label class="layui-form-label">投放量</label>' +
    '<div class="layui-input-block">' +
    '<input type="text" name="quantity" value="'+ data.quantity +'" style="width:90%" class="layui-input">' +
    '</div>' +
    '</div>' +
    '<div class="layui-form-item">' +
    '<label class="layui-form-label">开始时间</label>' +
    '<div class="layui-input-block">' +
    '<input type="text" name="startTimes" value="'+ data.start_time +'"style="width:90%" class="layui-input my_project_laydate">' +
    '</div>' +
    '</div>' +
    '<div class="layui-form-item">' +
    '<label class="layui-form-label">结束时间</label>' +
    '<div class="layui-input-block">' +
    '<input type="text" value="'+ data.end_time +'" style="width:90%" class="layui-input endTime">' +
    '</div>' +
    '</div>' +
    '</form>';
    layer.open({
    type: 1
    ,title: '修改计划数据' //不显示标题栏
    ,closeBtn: false
    ,area: ['500px', '380px']
    ,btn: ['确认修改', '取消']
    ,btnAlign: 'c'
    ,content: content
    ,yes: function(index, layero){
    }
    ,success: function(layero){
    layui.each(layero.find('.my_project_laydate'), function (index, elem) {
    laydate.render({elem: elem, type: 'datetime'});
    });
    }
    });
    0 回复
  • 小cc
    2019-2-18
    @岁月小偷 这是列表的渲染 点击更改的时候触发弹框的
    layui.use(['form','layer','table','laytpl'],function(){
    var form = layui.form,
    layer = parent.layer === undefined ? layui.layer : top.layer,
    $ = layui.jquery,
    laytpl = layui.laytpl,
    laydate = layui.laydate,
    table = layui.table;
    var startTime = '', endTime = '';


    //菜单列表
    var tableIns = table.render({
    elem: '#planList',
    url : '../Plan/planList',
    cellMinWidth : 95,
    page : true,
    height : "full-125",
    limits : [10,50,100,200],
    limit : 10,
    id : "planList",
    cols : [[
    {field: 'title', title: '广告名称',align:"left"},
    {field: 'channel_name', title: '渠道名称',align:"left"},
    {field: 'start_end_time', title: '开始-结束时间', align:"left", width:250},
    {field: 'time', title: '历时',align:"center", width:80},
    {field: 'key_word', title: '关键词', align:"left"},
    {field:'hot', title: '热度',align:"left", width:80},
    {field:'rankings', title: '最新排名',align:"left", width:100},
    {field:'quantity', title: '投放量',align:"left", width:80},
    {field:'click_num', title: '点击量',align:"left", width:80},
    {field:'exe_num', title: '激活量',align:"left", width:80},
    {field:'callback_num', title: '回调量',align:"left", width:80},
    {field:'active_rate', title: '激活率',align:"left", width:80},
    {field:'callback_rate', title: '回调率',align:"left", width:80},
    {title: '操作', fixed:"right",align:"center", width:130, templet:function(d){ //固定页面可以用此templet:'#adminListBar',
    return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="change">更改</a>';
    }},
    {field:'status', title: '状态', fixed:"right",align:"center", width:80, templet:function(d){ //固定页面可以用此templet:'#adminListBar',
    var statusText = d.status == "20"?"开启":"关闭";
    var statusIcon = d.status == "20"?"layui-btn-normal":"layui-btn-warm";
    return '<div id="s'+d.plan_detail_id+'"><a class="layui-btn layui-btn-xs '+statusIcon+'" lay-event="usable">'+statusText+'</a></div>';
    }}
    ]]
    });
    0 回复
  • @小cc 嗯嗯,我拷贝了你的代码在调试预览试了没问题额,不知道是不是你的页面中的其他的样式或者逻辑代码影响
    0 回复
  • 小cc
    2019-2-18
    可能是我版本的问题吧 我的版本是2.2.5
    0 回复
  • @小cc 2.2.5记得也不会有这个问题额
    0 回复
  • 小cc
    2019-2-18
    @岁月小偷, 现在定位到问题所在了,我们这个是个后台系统, 在主框架中引入了layui.all.js, 点击菜单使用的iframe打开页面,在页面中也引入了layui.all.js, 这就造成了时间插件被覆盖的情况, 当我把主框架的layui.all.js取消引入的时候, 时间框架就显示正常了,这有法解决吗, 大佬
    0 回复
  • 小cc
    2019-2-18
    0 回复
  • @小cc 个人认为不是这个原因,你看看你的layer是怎么定义的,真心不知道是哪个“大佬”教你们的这么去定义一个layer,优先找parent.layer有就用parent的,没有再用当前layui的,那么问当前的layer到底是谁的layer,是当前window的layui的还是父窗口的layui的,这种定义方式后面会有很多问题的,反正遇到很多其他的小伙伴掉坑里了,也不知道源头是谁教这么写的病态定义!
    你的问题也是因为这个原因导致的,你用parent的layer去弹出,那么你必须用父窗口对应的layui.laydate去定义,不然在计算位移的时候用的是子窗口去计算就会有问题,z-index也有问题
    0 回复
  • 小cc
    2019-2-18
    @岁月小偷 嗯, 确实是这个问题,父子整混乱了, 非常感谢。
    0 回复