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的樣式並沒有變：

手動解析後：