EasyUI基礎入門之Parser(解析器)

     JQuery EasyUI提供的元件包括功能強大的DataGrid,TreeGrid、面闆、下拉組合等。使用者可以組合使用這些元件,也可以單獨使用其中一個。(使用的形式是以插件的方式提供的)

     EasyUI所有的插件主要分為六大部分。Base基礎、Layout布局、Menu&Button、Form表單、Window視窗等。從最基礎的開始先掌握EasyUI基礎部分。Base部分包含了八個基礎插件分别為:

parser(解析器)

easyloader(加載器)

draggable(拖動)

droppable(放置)

resizable(大小調整)

pagination(分頁)

progressbar(進度條)

searchbox(搜尋框)

     我們先從parser開始。

     解析器是easyui非常重要的基礎元件,在easyui中我們能夠簡單的通過class定義一個元件,進而渲染出非常好的互動效果。就是通過parser進行解析的。parser會擷取所有在指定範圍内定義為easyui元件的class定義,并且根據字尾定義把目前節點解析渲染成特定的元件。

      parser可以有兩種使用方法: 

       不過這裡要說明的是這個jquery選擇器必須是你解析元件的父級以上的節點。也就是說這個查找出來的節點相當于一個容器,它隻會解析容器裡面的内容。

      parser屬性:

名稱

類型

描述

預設值

$.parser.auto

boolean

定義是否自動解析easyui元件

true

參數

$.parser.onComplete

context

當文法解析完成之後觸發的event

       根據上表$.parser.onComplete是easyui文法解析完成之後觸發的事件,這個事件是十分有用的。例如在加載一個頁面時,頁面并不是馬上就展現的,因為parser在dom載入完畢之後才會對整個頁面進行解析,當頁面元件使用較多的時候,完整的解析元件必定需要耗費較多的時間,這一過程可能就會出現短暫的界面混亂現象。解決的辦法就是:利用onComplete事件再結合一個載入遮罩層就解決了。

       具體的執行個體可以看如下代碼:

        上面的例子實際運作的效果是,當dom節點在解析的過程中,界面上會彈出類似"資料正在加載中",parser解析完畢之後,遮罩層就消失，正常顯示頁面内容（彈出資料加載完成彈出框）。

        上面的學習中我們知道,easyui根據class就能正常的渲染頁面都是靠parser。通常情況下我們在開發的時候并不會用到解析器。下面來看看神馬時候我們需要用到解析器。

        最主要的運用場景,隻要我們書寫相應的class,easyui就能成功的渲染頁面,這是因為解析器在預設情況下,會在dom加載完成的時候($(docunment).ready)被調用,而且是渲染整個頁面。

         需要手動調用的情況是:當頁面已經加載完成,但是此時我們使用js生成的DOM中包含了easyui支援的class,并且我們也有将其渲染成easyui元件的需求。在這種情況下手動調用parser就不可避免了。

         以如下代碼為例:

        當上述代碼的生成在easyui渲染界面之後,由于easyui不會一直監聽頁面,是以該段代碼并不會并渲染成“手風琴DIV”的樣式,這時候就需要我們手動去結下了。不過這裡需注意如下方面，上面也有提及。

解析目标位指定DOM的所有子孫元素,不包好該DOM本身:是以正确的寫法為:$parser.parser($(‘tt‘).parent()),并非

盡量不要多次解析同一個DOM元素(ID):頁面初始化就已經主動渲染過dom節點了,你再次手動解析該dom節點時該dom已經被parser重構,得到的DOM就并非是你料想的結果，該方式應該盡量避免。