您现在的位置:首页 >> 前端 >> 内容

在动态插入Easyuidatebox控件时使用$.parser.parse()手工渲染时,解决日期控件原有的值被清除问题的方法

时间:2017/11/7 15:07:13 点击:

  核心提示:在使用Easyui做前台页面时,很多时候需要应用到动态插入和删除DOM操作。如下,是我项目中任务系统中,添加任务时需要添加多个阶段描述,我使用的是Jquery操作DOM的。但是发现了一个问题,刚开始的...

在使用Easyui做前台页面时,很多时候需要应用到动态插入和删除DOM操作。如下,是我项目中任务系统中,添加任务时需要添加多个阶段描述,我使用的是Jquery操作DOM的。

在动态插入Easyuidatebox控件时使用$.parser.parse()手工渲染时,解决日期控件原有的值被清除问题的方法

但是发现了一个问题,刚开始的时候没有使用$.parser.parse()进行渲染时,新添加的easyui控件样式完全显示不出来,包括像placeholder这样的提示都没有。查阅相关资料知道$.parser.parse()还可以传递一个DOM对象,感觉有救了,但是我们只渲染我们刚添加的DOM,而不是指定某个id或class,刚好Jquery的insetBefore方法返回值就是刚添加的DOM,其他的appendTo类似,都是返回刚添加的DOM。

项目中我的代码是这样的,perfect解决!

// 添加任务阶段点击事件
        $("#addTaskStage")
                .click(
                        function() {
                            var copyNode = $("<p class=\"append\" style=\"margin: 20px auto; width: 90%; border: 1px dotted #333\">"
                                    +"<p style=\"margin: 20px 0 0 20px;\">"
                                    +"<label class=\"Validform_label\">第一阶段:</label>"
                                    +"<textarea rows=\"5\" cols=\"30\" class=\"stage_content\" style=\"width: 70%;vertical-align: top\"  placeholder=\"请输入阶段任务描述\"></textarea>"
                                    +"</p>"
                                    +"<p style=\"margin: 20px 0 0 20px\">"
                                    +"<label class=\"Validform_label\">任务文件:</label>"
                                    +"<table style=\"margin-left: 50px;\" cellspacing=\"1\" cellpadding=\"0\" border=\"0\">"
                                    +"<tr>"
                                    +"<td class=\"txt_value\">"
                                        +"<p style=\"width: 588px; height: 270px;\">"
                                            +"<iframe scrolling=\"no\" frameborder=\"0\" id=\"FrameID\" name=\"FrameID\" src=\"<%=path%>/res/image-upload/img_uploadMutil.jsp\" style=\"width: 90%; height: 100%;\"></iframe>"
                                    + "<input type=\"hidden\" id=\"imgs\" class=\"stage_fileds_id\" name=\"img_url\" /> "
                                    + "</p>"
                                    + "</td>"
                                    + "</tr>"
                                    + "</table>"
                                    + "</p>"
                                    + "<p style=\"margin: 20px 0 0 20px;\">"
                                    + "<label class=\"Validform_label\">组织赋分:</label>"
                                    + "<input class=\"easyui-numberbox org_score\" style=\"width: 60%\" data-options=\"required:true,prompt:'请输入组织赋分'\" />"
                                    + "</p>"
                                    + "<p style=\"margin: 20px 0 20px 20px;\">"
                                    + "<label class=\"Validform_label\">结束日期:</label>"
                                    + "<input class=\"easyui-datebox stage_end_time\" style=\"width: 60%\" data-options=\"required:true,prompt:'请输入结束日期'\" />"
                                    + "</p>" 
                                    +"<a href=\"javascript:void(0);\" onclick=\"deleteDOM(this);\" class=\"easyui-linkbutton\" style=\"float:right; border-radius: 4em; width: 80px; background: #9a748a; margin:-270px 30px 0 0; color: white\">删除</a>"
                                    + "</p>");
                            copyNode = copyNode.insertBefore($(this));
                            $.parser.parse(copyNode); //只有加上了这句才渲染成功,网上查找到的解决方案,平时我们前台开发的时候不经常用,因为这个是EasyLoader的加载方式(智能加载),按需加载js
                        });

作者:网络 来源:huangbaoka