Parser是EasyUI框架中用于解析渲染诸如TextBox、LinkButton、Datagrid等等各类组件的基本模块，也是EasyUI框架运行的必要条件。本文介绍Parser的详细操作说明和使用场景。
parser的属性、事件和方法都非常简单。见下表。
$.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对应。
<html>
<head>
<link rel="stylesheet" type="text/css"href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css"href="easyui/themes/icon.css" />
<script type="text/javascript"src="easyui/jquery.min.js"></script>
<script type="text/javascript"src="easyui/jquery.easyui.min.js"></script>
<script>
$("#pb").hide(); // 初始时先隐藏进度条
$.parser.auto = false;
$.parser.onComplete = function(context) {
$("#pb").show(); // 渲染完成后显示进度条
alert("渲染完成");
}
function pareseMe() {
/*
参数为进度条的父元素jQuery对象
即class为container的div元素
*/
$.parser.parse($("#pb").parent());
}
</script>
</head>
<body>
<div class="container">
<div id="pb" class="easyui-progressbar"></div>
</div>
<button id="btnParser" onclick="pareseMe()">开始渲染</button>
</body>
</html>
上例代码中，我们先隐藏了id为pb的进度条组件，随后设置为手动解析，等组件解析完成后再显示进度条。点击“开始渲染”按钮后，即开始解析。
此处，解析的是进度条的父元素，即<div class="container">，所以onComplete中的参数context也是<div class="container">。
easyui框架的特点是必须等页面所有的DOM节点元素都加载完毕之后，再对组件进行渲染。如果一张页面中含有比较多的easyui组件，将会出现初始时界面混乱，随后恢复正常的现象，虽然这并非是Bug，但给用户的印象总归不好。示例代码中我们通过先隐藏组件，加载完成后再显示组件的方式来避免界面混乱（其实本示例代码只有一个组件，几乎不会出现界面混乱的现象）。一般我们在商用系统开发中，通过给页面加上一个遮罩层，等组件加载完毕后，在onComplete事件中再取消遮罩层来防止出现界面混乱的现象。
最终，我们期望在整个页面加载时，增加一个遮罩层。
1、加遮罩层
<div id="loading" style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;background:#DDDDDB;text-align :center;padding-top:20%;"
<h1><font color="#15428B">加载中....</font></h1>
</div>
2、加载页面完成后的js
function closes() {
$('#loading').fadeOut('normal', function () {
$(this).remove();
});
}
var pc;
$.parser.onComplete = function () {
if (pc) clearTimeout(pc);
pc = setTimeout(closes, 1000);
}
效果完美！
