easyui的ComboBox和DateBox复制

本文介绍了在使用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();不添加对象时全局重新渲染,这样会造成前面的数据丢失。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值