JAVA高级面试进阶训练营视频教程

admin

起因：

　　因为要动态的加入一个easyui渲染的dom对象，但是怎么动态生成都没有样式效果。

　　

解决经过：

　　查看文档发现，easyui的渲染是在在网页加载完成后，相当于在$(document).ready()事件中，对整个网页进行了一次扫描，发现某个input标签含有easyui的属性，就在相应的地方进行ui的修改。

　　因此，如果我们用什么append、appendTo方法动态在页面中插入一段html代码，或者用什么addClass方法给input标签动态添加一个class属性，这些操作EasyUI是不知道的，所以新插入的这些东东，即使有class="easyui-XXXXXXX"属性，但没有任何效果。

　　

解决方案：

　　如何通知EasyUI呢？通过查询资料，发现网上比较流行的一种方法是用：$.parser.parse()。一般像我这样的小菜可能就直接拿来用了，把它放在插入html的语句之后，重新渲染界面，果然很管用，新加入的元素能被识别。

　　但是，很快就发现一个问题，由于使用了$.parser.parse()对整个页面重新渲染，这会影响到以前已经渲染过的组件。

　　$.parser.parse()由于它对整个页面进行渲染，以前正常的组件也被渲染了，相当于所有的组件进行了一次“初始化”，最终导致值丢失。

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

var appendDoc=$('<div class="layui-col-md5 layui-col-sm5 layui-col-xs5 fileboxdiv"><input  name="file" class="easyui-filebox filebox" /></div>').appendTo("#fileDiv");
         $.parser.parse(appendDoc);

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