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


    起因:

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

  • 相关阅读:
    动画Animation
    ListView配合BaseAdapter
    ListView 搭配SimpleAdapter
    内部类以及内部接口的实例化
    SAP FI模块常用事务代码
    java随机生成字符串和校验
    JAVA版exe可执行加密软件
    微信小程序实现类似JQuery siblings()的方法
    微信小程序实现给循环列表点击添加类(单项和多项)
    微信小程序如何动态增删class类名
  • 原文地址:https://www.cnblogs.com/GH0522/p/10150781.html
Copyright © 2020-2023  润新知