easyUI动态添加控件带渲染效果.doc

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法2011-03-22 12:53现象： AJAX返回的html无法做到自动渲染为EasyUI的样式.比如：class=easyui-layout 等处理方法： 在html片段加载完毕后使用Js代码 1. $.parser.parse(context) 即可重新渲染。实现原理： 首先附上jquery.parser.js的源码Js代码 1. (function($)2. $.parser=3. auto:true,4. plugins:linkbutton,menu,menubutton,splitbutton,layout,5. tree,window,dialog,datagrid,6. combobox,combotree,numberbox,validatebox,7. calendar,datebox,panel,tabs,accordion8. ,9. parse:function(context)10. if($.parser.auto)11. for(vari=0;i$.parser.plugins.length;i+)12. (function()13. varname=$.parser.pluginsi;14. varr=$(.easyui-+name,context);15. if(r.length)16. if(rname)17. rname();18. elseif(window.easyloader)19. easyloader.load(name,function()20. rname();21. )22. 23. 24. )();25. 26. 27. 28. ;29. $(function()30. $.parser.parse();31. );32. )(jQuery); 框架默认在页面加载完成后自动使用$.parser.parse()对整个文档进行渲染Js代码 1. $.parser.auto/是否自动进行渲染2. $.parser.plugins/包含目前EasyUI框架中所有的插件名称3. $.parser.parse(context)4. /context为待查找的DOM元素集、文档或jQuery对象,为空时默认为整个文档5. /渲染对象为：class=easyui-pluginName的元素jQuery EasyUI parser 的使用场景2012年03月07日parser 共 1237字 评论数 1 被围观 3,768 views+文章目录隐藏 1自动调用parser： 2手动调用parser：o 2.1(1) 解析目标为指定DOM的所有子孙元素，不包含这个DOM自身：o 2.2(2) 某些组件无法多次解析同一个DOM元素：parser，故名意思，就是解析器的意思，别看他只有那么几行代码，jQuery Easyui 能够根据class就能正常渲染页面全靠它了。一般情况下，我们并用不到解析器，本文主要讨论一下，什么情况下会用到它，如何使用。自动调用parser：我们之所以在页面中，只要书写相应的class，Easyui就能成功渲染页面，这是因为解析器在默认情况下，会在文档装载完成的时候($(document).ready)被调用一次，而且是渲染整个页面。手动调用parser：有些童鞋反映，当页面装载完后，如果用javascript生成的DOM中包含了Easyui支持控件的class，比如说，用javascript生成了以下代码：121324虽然页面上有这样的DOM了，但是没有被渲染为Easyui的accordion插件，原因很简单，Easyui并不会一直监听页面，所以不会主动渲染，这时候就需要手工调用Easyui的parser进行解析了。不过手工调用需要注意以下几点：(1) 解析目标为指定DOM的所有子孙元素，不包含这个DOM自身：比如上面代码生成的HTML，id=tt是我们想要的手风琴DIV，像下面代码去手工解析的话是得不到你想要的结果的：1$.parser.parse($(#tt);道理很简单，parser只渲染tt的子孙元素，并不包括tt自身，而它的子孙元素并不包含任何Easyui支持的控件class，所以这个地方就得不到你想要的手风琴效果了，应该这样写：1$.parser.parse($(#tt).parent();渲染tt的父节点的所有子孙元素就可以了，个人觉得通过jQuery的parent()方法是最安全不过的了，不管你的javascript输出了什么DOM，直接渲染其父节点就可以保证页面能被正确解析。(2) 某些组件无法多次解析同一个DOM元素：如果页面上本身就有tt元素：12页面装载完，你通过脚本向tt元素append两个子DIV，然后解析：1$(#tt).append(12)2$.parser.parse($(#tt).parent();不要以为你会得到一个