在单页版中,弹出编辑框,laydate无法渲染

提问 已结 12 217
jyqin7
jyqin7 VIP4 2019-8-15
悬赏:50飞吻
版本:layuiAdmin v1.2.1 浏览器:chrome
按照单页版的示例,在列表页点击编辑弹出编辑页,将日期填充到对应的日历控件中
    <div class="layui-inline">
<label class="layui-form-label">开始日期</label>
<div class="layui-input-inline">
<script type="text/html" template>
<input type="text" name="meetingStartDateDisplay" id="meeting-start-date" placeholder="请输入"
autocomplete="off"
class="layui-input" value="{{ d.params.meetingStartDateDisplay || '' }}">
</script>
</div>
</div>
laydate.render({
elem: '#meeting-start-date'
, type: 'date'
, trigger: 'click'
});
在第一次点击编辑的时候一切功能正常,但是在第二次点击的时候,日历控件就无法渲染了。
如果F5刷新页面,再打开是可以的,但也仅仅只是第一次可以。

在网上搜索了下相关提问,有的建议把元素删除再加入。
实际测试过程中,第二次弹出的时候,用jquery拿不到弹出页面的元素。

我调试了一下,发现第一次是先加载html,再执行js. 再弹出相同的框就是先走js,再加载html。

本人擅长后端,不擅长这一块,所以请教一下各位前端大佬,如何解决这个问题?

回帖
  • 你搞混乱了
    <script type="text/html" template>
    <input type="text" name="meetingStartDateDisplay" id="meeting-start-date" placeholder="请输入"
    autocomplete="off"
    class="layui-input" value="{{ d.params.meetingStartDateDisplay || '' }}">
    </script>
    ,你这个里边的id,哪能在另一个script里初始化呢?怎么想的呢?操作哪段在哪段加lay-done
    0 回复
  • 应该是在回调后渲染
    0 回复
  • 谷粒多
    2019-8-15
    页面加载完再渲染
    0 回复
  • 谷粒多
    2019-8-15
    0 回复
  • 如果是动态模板中,需要在lay-done属性的layui.data.xx全局方法中初始化你的日期
    0 回复
  • 我现在就是这么用的 [汗]

    弹出的js
    <script>
    layui.data.done = function (d) {
    layui.use(['form', 'laydate', 'upload'], function () {
    var $ = layui.jquery,
    form = layui.form,
    upload = layui.upload,
    laydate = layui.laydate;

    upload.render({
    elem: '#meetingIconUpload' //绑定元素
    , url: '/sys/file/uploadImage?module=meeting&access_token=' + layui.data('layuiAdmin').access_token //接口url
    , done: function (res) {
    console.log(res.data.path)
    $("#meetingIconShow").attr('src', res.data.path)
    $("#meetingIcon").val(res.data.path)
    }
    });
    var ins1 = laydate.render({
    elem: '#meeting-start-date'
    , type: 'date'
    , trigger: 'click'
    });
    var ins2 = laydate.render({
    elem: '#meeting-end-date'
    , type: 'date'
    , trigger: 'click'
    });

    form.on('switch(switch-app-meeting-status)', function (data) {
    if (data.elem.checked) {
    $('#app-meeting-Status').val(1);
    } else {
    $('#app-meeting-Status').val(0);
    }
    });

    });
    };
    列表页的js
    admin.popup({
    title: '编辑会议'
    , area: ['800px', '900px']
    , id: 'LAY-popup-app-meeting-edit'
    , success: function (layero, index) {
    view(this.id).render('app/meeting/meeting_edit', data).done(function () {
    layedit.set({
    uploadImage: {
    url: '/sys/file/uploadImage?module=meeting&access_token=' + layui.data('layuiAdmin').access_token //接口url
    , type: 'POST'
    }
    });
    var editIndex = layedit.build('meetingContent');
    admin.req({
    url: '/app/meeting/getMeetingContent'
    , data: data
    , done: function (res) {
    console.log(res.data);
    if (res.code == 0) {
    layedit.setContent(editIndex, res.data.meetingContent)
    }
    }
    });

    form.render(null, 'app-meeting-edit-form');
    //监听提交
    form.on('submit(app-meeting-edit-form-submit)', function (data) {
    var field = data.field; //获取提交的字段
    field.meetingContent = layedit.getContent(editIndex);

    admin.req({
    url: '/app/meeting/editAppMeeting' //实际使用请改成服务端真实接口
    , data: field
    , done: function (res) {
    layui.table.reload('app-meeting-table'); //重载表格
    }
    });
    layer.close(index); //执行关闭
    });
    });
    }
    });
    0 回复
  • @谷粒多 我现在已经是这么做的
    0 回复
  • @HiTerry 我现在本身就是这么做的,调试的时候还是不行,请问还有更细化的思路吗?
    0 回复
  • @安迪 我设置的就是在渲染后执行的

    让我感到比较困惑的是
    console.log(document.getElementById('meeting-end-date'));
    第一个打开的时候 是有东西的,第二次打开就是null了

    0 回复
  • 你哪这样做了,你的代码里没有lay-done属性,你是这样写的
    <script type="text/html" template>
    。。。
    0 回复