js动态修改Easyui元素不生效,EasyUI动态渲染解析解决方案

迷南。 2021-10-25 13:58 611阅读 0赞

### 起因： ###

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

![1306245-20181220172526996-1505924299.png][]

### 解决经过： ###

查看文档发现，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方法是有返回值的，返回的恰恰就是刚刚插入的对象。我们拿到这个对象，单独对它进行渲染，这样既可以实现动态渲染，又能避免影响其它组件。

转载于:https://www.cnblogs.com/GH0522/p/10150781.html

[1306245-20181220172526996-1505924299.png]: /images/20211025/9831809a652c41b988c1ac102a61df16.png

js动态修改Easyui元素不生效,EasyUI动态渲染解析解决方案

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【easyui】动态显示datagrid列

相关 easyUI实现动态表头

相关 easyui 实现动态表头

相关 EasyUI动态表头与数据宽度不对应

相关 easyui-combobox 动态改变选项值

相关【easyui】easyui动态设置accordion的title

相关 js动态修改Easyui元素不生效,EasyUI动态渲染解析解决方案

相关 easyui之datagrid：动态生成列(动态报表)

相关 easyui之datagrid动态修改列

相关 easyUI,重新渲染