EasyUI Base - parser（解析器）

前言

EasyUI的组件包括功能强大的DataGrid, TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的)

---

EasyUI体系结构

如图所示，EasyUI所有的插件主要分为六大部分：

Base部分的插件有：

其他部分可以参见API：http://pan.baidu.com/s/1pL6O7hD

---

Parser（解析器）

解析器是easyui非常重要的基础组件,在easyui中我们能够简单的通过class定义一个组件,从而渲染出非常好的交互效果。就是通过parser进行解析的。parser会获取所有在指定范围内定义为easyui组件的class定义,并且根据后缀定义把当前节点解析渲染成特定的组件。

JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的)

两种使用方法：

$.parser.parse();       // 解析整个页面 
$.parser.parse('#cc');  // 解析指定元素

注意第二个函数会渲染该容器下的所有元素，但不包括自身。

其他的属性参考请API文档，如可以指定渲染完成的行为等。

---

什么时候使用Parser

一般情况下Parser我们是不需要使用的，如通过class指定渲染和js代码指定渲染，这些情况EasyUI会自动解析。

使用Parser的场景：

当页面加载完成后, 使用js生成的DOM元素中包含了EasyUI支持的class, 并想将其渲染成EasyUI组件

例子：

$(function(){
    var $panel = $("<div id='my-panel' class='easyui-panel' title='我的面板'>luoluolzb</div>");
    $panel.css("width", "300px");
    $panel.css("height", "200px");
    $(document.body).append($panel);
    $.parser.parse($panel.parent());
});

使用js动态创建了一个div并赋予了EasyUI的class，但如果我们不手动解析，会发现这个div的样式并没有变：

手动解析后：