EasyUI之动态修改或添加textbox等表单组件

短命女 2022-06-10 03:16 632阅读 0赞

在某个input标签上添加

class="easyui-datebox"

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

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

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

$.parser.parse()

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

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

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

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

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

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

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

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