easyui的重新渲染

在用js加载dom的时候经常出现样式没用的问题,是因为在加载该元素之前页面已经被渲染

这时候你需要重新渲染


在某个input标签上添加

class="easyui-datebox"
  • 1

它就能自动变成日历,这其实是EasyUI扫描的结果,在网页加载完成后,相当于在$(document).ready()事件中,对整个网页进行了一次扫描,发现某个input标签含有class=”easyui-datebox”属性,就做上边讲到那些处理,不仅仅是EasyUI如此,几乎所有的UI都是这个原理。

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

如何通知EasyUI呢?通过查询资料,发现网上比较流行的一种方法是用:

$.parser.parse()
  • 1

把它放在插入html的语句之后,重新渲染界面,果然很管用,新加入的元素能被识别。

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

举个例子:页面原本有一个使用了datebox组件的input标签,用户通过datebox组件选择了时间,然后用户又新增了一个使用datebox组件的input标签(这时候程序会重新渲染页面),奇怪的事情发生了:原来的input标签明明已经选过时间,显示的也正常,但却拿不到值!

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

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

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

$.parser.parse(targetObj);
  • 1
  • 2
  • 3

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

因此,在读者的项目中,最好使用局部渲染(无论用何种方法得到目标对象),避免使用全局渲染。


原文链接

http://blog.csdn.net/qq_20989105/article/details/76953712

猜你喜欢

转载自blog.csdn.net/qq_39205291/article/details/79162997