前言 JQuery EasyUI提供的組件包括功能強大的DataGrid,TreeGrid、面板、下拉組合等。使用者可以組合使用這些組件,也可以單獨使用其中一個。(使用的形式是以外掛程式的方式提供的)EasyUI體繫結構 EasyUI所有的外掛程式主要分為六大部分。Base基礎、Layout布局、Menu&Button、Form表單、Window視窗等。從最基礎的開始先掌握EasyUI基礎部分。Base部分包含了八個基礎外掛程式分別為: 我們先從parser開始。Parser(解析器)
解析器是easyui非常重要的基礎組件,在easyui中我們能夠簡單的通過class定義一個組件,從而渲染出非常好的互動效果。就是通過parser進行解析的。parser會擷取所有在指定範圍內定義為easyui組件的class定義,並且根據尾碼定義把當前節點解析渲染成特定的組件。
parser可以有兩種使用方法:
1、$.parser.parse();不帶參數,預設解析該頁面中所有被定義為easyui組件的節點。 2、$.parser.parse('#cc');帶一個jquery選取器，使用這種方式我們可以單獨解析局部的easyui元件節點。 不過這裡要說明的是這個jquery選取器必須是你解析組件的父級以上的節點。也就是說這個尋找出來的節點相當於一個容器,它只會解析容器裡面的內容。
parser屬性:
| 名稱 | 類型 | 描述 | 預設值 |
| $.parser.auto |
boolean | 定義是否自動解析easyui組件 | true |
| 名稱 | 參數 | 描述 |
| $.parser.onComplete |
context | 當文法解析完成之後觸發的event |
具體的執行個體可以看如下代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>EasyUI基礎之Parser</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script> function closes() { $("#Loading").fadeOut("normal", function () { $(this).remove(); alert("資料載入完成"); }); } var pc; $.parser.onComplete = function () { if (pc) { clearTimeout(pc); } pc = setTimeout(closes, 1000); } </script></head><html><body><div id='Loading'> <image src='images/loading.gif'/> <font color="#2bd4cd" size="4">頁面正在載入中···</font></div></body></html> 上面的例子實際啟動並執行效果是,當dom節點在解析的過程中,介面上會彈出類似"資料正在載入中",parser解析完畢之後,遮罩層就消失，正常顯示頁面內容（彈出資料載入完成彈出框）。
Parser(解析器)應用情境
上面的學習中我們知道,easyui根據class就能正常的渲染頁面都是靠parser。通常情況下我們在開發的時候並不會用到解析器。下面來看看神馬時候我們需要用到解析器。
自動調用parser最主要的運用情境,只要我們書寫相應的class,easyui就能成功的渲染頁面,這是因為解析器在預設情況下,會在dom載入完成的時候($(docunment).ready)被調用,而且是渲染整個頁面。
手動調用parser需要手動調用的情況是:當頁面已經載入完成,但是此時我們使用js產生的DOM中包含了easyui支援的class,並且我們也有將其渲染成easyui組件的需求。在這種情況下手動調用parser就不可避免了。
以如下代碼為例:
<div class="easyui-accordion" id="tt"> <div title="title1">1</div><div title="title2">2</div></div>當上述代碼的產生在easyui渲染介面之後,由於easyui不會一直監聽頁面,所以該段代碼並不會並渲染成“手風琴DIV”的樣式,這時候就需要我們手動去結下了。不過這裡需注意如下方面，上面也有提及。
$.parser.parse($('#tt')); Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
