Skip to content

EasyUI动态加入HTML代码渲染解析

很多时候代码里需要动态添加HTML代码,来实现各种效果.但是在页面DOM加载完以后在添加的HTML代码.easyui是无视的.不会去渲染的.
原理很简单.easyi的各种效果的渲染是在页面DOM加载完成之后就马上渲染.然而如果在页面加载完成后动态加入的他就不会去识别.如果及时的去捕捉及刷新会造成极大的性能问题.
所以需要自己去调用easyui提供的接口来动态渲染.
举个例子:页面原本有一个使用了datebox组件的input标签,用户通过datebox组件选择了时间,然后用户又新增了一个使用datebox组件的input标签(这时候程序会重新渲染页面),奇怪的事情发生了:原来的input标签明明已经选过时间,显示的也正常,但却拿不到值!

根据小菜的想法,原因正是出在$.parser.parse()上,由于它对整个页面进行渲染,以前正常的组件也被渲染了,相当于所有的组件进行了一次“初始化”,最终导致值丢失。

再仔细问问度娘,发现$.parser.parse()是可以带参数的,参数意思差不多就是传入一个局部的DOM对象,只对局部进行渲染,避免影响其他组件。

举个巧妙的应用例子:

var targetObj = $("<input class="easyui-datebox" name="mydate" type="text" />").appendTo("#id");

$.parser.parse(targetObj);

我们常常会通过appendTo方法把使用了datebox组件的input标签插入到某个DOM中,别忘了appendTo方法是有返回值的,返回的恰恰就是刚刚插入的对象。我们拿到这个对象,单独对它进行渲染,这样既可以实现动态渲染,又能避免影响其它组件。

渲染只需要渲染自己动态添加的片段就好~切记切记

发表评论

电子邮件地址不会被公开。 必填项已用*标注