easyui的ComboBox和DateBox复制

最新推荐文章于 2021-01-15 03:55:54 发布

时间在这里停顿

最新推荐文章于 2021-01-15 03:55:54 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/n447194252/article/details/76154803

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在使用easyui时遇到的表单复制问题，特别是在添加按钮触发新行输入内容时，如何正确处理ComboBox和DateBox组件。关键在于JS引用的顺序，easyui库必须放在自定义JS之后，以避免双份渲染和功能失效。同时，文章提到了clone()方法的限制，以及before(), after(), insertBefore(), insertAfter()等方法的使用注意事项，以及全局重新渲染可能导致的数据丢失问题。" 38314223,1163677,SQL Server核心数据库详解,"['SQL Server', '数据库对象', '系统数据库']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大致说一下场景，就是一个表单，表单内有添加按钮，点击添加按钮，增加一行输入内容。

这里写图片描述

先来说正确的打开方式
JS代码(文件名为form.js)

$(function () {
    var model = $('#model').html(); //保存渲染前的模板
    $('#model').css("display","none"); //隐藏模板

    //增加按钮
    $('.add').on('click','a',function () {
        var $one = $("<div class='list'></div>").append(model);
        $('.add').before($one);
        $.parser.parse($one); //重新渲染$one对象
    });

    //模拟增加,用于出现第一行
    $('.add a').click();
})

//删除按钮
function remove(event) {
    var form = document.getElementsByTagName('form')[0];
    form.removeChild(event.parentNode);
}

HTML代码

<form>
        <div id="model" class="list">
            <input class="easyui-combobox" data-options="prompt:'文本'" style="width:10%">
            <input class="easyui-datebox" data-options="prompt:'时间',formatter:myformatter,parser:myparser" style="width:10%">
            <a href="javascript:void(0);" onclick="remove(this)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
        </div>
        <div class="add">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-add'"></a>
        </div>

</form>

HTML中JS引用

<script type="text/javascript" src="../../resources/jquery-easyui-1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="../staticmedia/js/form.js"></script>
    <script type="text/javascript" src="../../resources/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../staticmedia/js/datebox.js"></script>

需要注意：
引用script时一定要注意顺序！！！ jquery肯定在前边，自己写的JS会用到，而easyui的要在自己写的JS后边，如果在自己写的JS前面就会造成获取模板是取到的是渲染后的代码，这种情况下再次渲染会出现双份渲染，就是这个样子
这里写图片描述
这种情况下如果自己的JS中不再次渲染，倒是会显示正常，但是下拉三角之类的功能都无法使用
顺序的问题可能还会造成对别的JS有影响，因为可能会用到easyui中的方法，这种情况下只好提取JS到不同文件，分开放置了。

另说一些碰到的其他问题：

1、复制首先想到的就是直接上clone()，但是clone()方法无法保存渲染前的对象，渲染后的对象则又成为上边的问题。
2、before(), after(), insertBefor(), insertAfter() 这些方法返回值都是调用方本身，挺常识的，但是这些放到一起时就给混了，搞错了添加渲染对象时就没反应了。
3、$.parser.parse();不添加对象时全局重新渲染，这样会造成前面的数据丢失。

最后附一张完成图好了
这里写图片描述