【连载】研究EasyUI系统—Parser组件

Parser是EasyUI框架中用于解析渲染诸如TextBox、LinkButton、Datagrid等等各类组件的基本模块，也是EasyUI框架运行的必要条件。
　　parser的属性、事件和方法都非常简单。见下表。

Parser属性表

属性名称	属性值类型	默认值	描述
$.parser.auto	布尔值	true	是否自动解析easyui组件

Parser方法表

方法名称	参数	描述
$.parser.parser	context	分析制定组件，参数context为目标组件的jQuery对象

Parser事件表

事件名称	参数	描述
$.parser.onComplete	context	组件解析完成后触发该事件

$.parser.auto属性指定是否自动解析组件，如果设为true则表明自动解析，页面加载完毕后所有easyui组件将被渲染成标准的easyui样式。如果设为false，则需要手动进行渲染，easyuui很多组件本身是基于div进行构件的，那么渲染前，它仅仅是个div标记，在页面中没有特别的显示，而渲染完成后则成了我们看到的easyui组件。

$.parser.parse方法用于手动渲染组件。当$.parser.auto属性设定为false的时候，就需要调用$.parser.parse来手动渲染指定的组件。该方法可以有参数，也可以没有参数。没有参数时方法将解析页面中所有的组件。参数context指定了待解析的组件，并且是一个jQuery对象，如$(“#target”).parent()。特别需要说明的一点是，假如我们需要解析一个progressbar组件，那么context参数应该是progressbar组件的父元素，因为$.parser.parse进行解析时，只解析context参数对应DOM的子孙节点，context本身对应的DOM节点并不被解析。

$.parser.onComplete事件在组件解析完成后触发。如果对整个页面所有组件进行解析，是不需要用到参数context的；如果对指定组件进行解析，context则是该指定组件的父节点jQuery对象。这与$.parser.parse方法中的context对应。

  
    
    
    
    
    
  
  
    

       

    
    开始渲染
  

上例代码中，我们先隐藏了id为pb的进度条组件，随后设置为手动解析，等组件解析完成后再显示进度条。点击“开始渲染”按钮后，即开始解析。此处，解析的是进度条的父元素，即

，所以onComplete中的参数context也是

。
　　easyui框架的特点是必须等页面所有的DOM节点元素都加载完毕之后，再对组件进行渲染。如果一张页面中含有比较多的easyui组件，将会出现初始时界面混乱，随后恢复正常的现象，虽然这并非是Bug，但给用户的印象总归不好。示例代码中我们通过先隐藏组件，加载完成后再显示组件的方式来避免界面混乱（其实本示例代码只有一个组件，几乎不会出现界面混乱的现象）。一般我们在商用系统开发中，通过给页面加上一个遮罩层，等组件加载完毕后，在onComplete事件中再取消遮罩层来防止出现界面混乱的现象。