现在的位置: 首页 > easyui > Base > parser > 正文
jQuery EasyUI parser 的使用场景
2012年03月07日 parser ⁄ 共 1237字 评论数 7 ⁄ 被围观 59,782 views+
文章目录
[隐藏]

parser,故名意思,就是解析器的意思,别看他只有那么几行代码,jQuery Easyui 能够根据class就能正常渲染页面全靠它了。一般情况下,我们并用不到解析器,本文主要讨论一下,什么情况下会用到它,如何使用。

自动调用parser:

我们之所以在页面中,只要书写相应的class,Easyui就能成功渲染页面,这是因为解析器在默认情况下,会在文档装载完成的时候($(document).ready)被调用一次,而且是渲染整个页面。

手动调用parser:

有些童鞋反映,当页面装载完后,如果用javascript生成的DOM中包含了Easyui支持控件的class,比如说,用javascript生成了以下代码:

<div class="easyui-accordion" id="tt">
        <div title="title1">1</div>
	<div title="title2">2</div>
</div>

虽然页面上有这样的DOM了,但是没有被渲染为Easyui的accordion插件,原因很简单,Easyui并不会一直监听页面,所以不会主动渲染,这时候就需要手工调用Easyui的parser进行解析了。不过手工调用需要注意以下几点:

(1) 解析目标为指定DOM的所有子孙元素,不包含这个DOM自身:

比如上面代码生成的HTML,id="tt"是我们想要的手风琴DIV,像下面代码去手工解析的话是得不到你想要的结果的:

$.parser.parse($('#tt'));

道理很简单,parser只渲染tt的子孙元素,并不包括tt自身,而它的子孙元素并不包含任何Easyui支持的控件class,所以这个地方就得不到你想要的手风琴效果了,应该这样写:

$.parser.parse($('#tt').parent());

渲染tt的父节点的所有子孙元素就可以了,个人觉得通过jQuery的parent()方法是最安全不过的了,不管你的javascript输出了什么DOM,直接渲染其父节点就可以保证页面能被正确解析。

(2) 某些组件无法多次解析同一个DOM元素:

如果页面上本身就有tt元素:

<div class="easyui-accordion" id="tt">
</div>

页面装载完,你通过脚本向tt元素append两个子DIV,然后解析:

$('#tt').append('<div title="title1">1</div><div title="title2">2</div>')
$.parser.parse($('#tt').parent());

不要以为你会得到一个满意的accordion,你什么也得不到,因为页面初始化的时候parser就主动渲染过tt元素,这时候tt已经被parser重构,你再到脚本中append,得到的DOM结构,其实并不是你预想的结果了,所以要避免这种用法。

目前有 7 条留言 其中:访客:4 条, 博主:3 条

  1. lista de emails : 2012年09月21日23:14:45  -49楼 @回复 回复

    hey there, truly interesting posts you make, just keep up the great work, will be back for more! lista de emails lista de emails lista de emails lista de emails lista de emails

  2. lzpong : 2015年02月26日15:19:04  -48楼 @回复 回复

    如果多次重复调用呢?
    $.parser.parse($(‘#tt’).parent());
    $.parser.parse($(‘#tt’).parent());
    $.parser.parse($(‘#tt’).parent());
    会怎么样?页面乱了…..


    • 管理员
      世纪之光 : 2015年02月27日09:25:42  地下1层 @回复 回复

      多次调用本来就是不合理的,组件一旦实例化完成,通常情况下都是不需要再次做实例化.
      页面之所以乱,是因为实例化的组件依旧包含Easyui的关键样式,解析器会认为需要实例化,于是就破坏了已有实力的DOM结构.

  3. Ti : 2015年10月08日15:42:17  -47楼 @回复 回复

    在datagrid 中 formatter中 return 的easyui 组件 这人h时候应该在哪里解析呢


    • 管理员
      世纪之光 : 2015年10月09日09:06:41  地下1层 @回复 回复

      这种情况不是太好解析,一般通过修改视图源码的方式去实现。

  4. 向阳 : 2015年11月02日15:02:16  -46楼 @回复 回复

    你好,如果我想动态用append追加,追加的html有easyui的样式,我该怎么实现


    • 管理员
      世纪之光 : 2015年11月06日13:34:00  地下1层 @回复 回复

      如果你动态append的内容包含很多easyui的组件,可以使用parser 进行一次性实例化;
      但是,如果你append进去的只有了了几个easyui组件,建议你就调用相关组件的js构造方法去进行实例化。

给我留言

留言无头像?


×