前言
JQuery EasyUI提供的組件包含功能強大的DataGrid,TreeGrid、面板、下拉組合等。用戶能夠組合使用這些組件,也能夠單獨使用當中一個。(使用的形式是以插件的方式提供的)EasyUI體系結構
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能夠有兩種用法:
1、$.parser.parse();不帶參數,默認解析該頁面中全部被定義為easyui組件的節點。
2、$.parser.parse('#cc');帶一個jquery選擇器，使用這樣的方式我們能夠單獨解析局部的easyui組件節點。
只是這里要說明的是這個jquery選擇器必須是你解析組件的父級以上的節點。也就是說這個查找出來的節點相當於一個容器,它僅僅會解析容器里面的內容。
parser屬性:
| 名稱 | 類型 | 描寫敘述 | 默認值 |
| $.parser.auto |
boolean | 定義是否自己主動解析easyui組件 | true |
| 名稱 | 參數 | 描寫敘述 |
| $.parser.onComplete |
context | 當語法解析完畢之后觸發的event |
依據上表$.parser.onComplete是easyui語法解析完畢之后觸發的事件,這個事件是十分實用的。比如在加載一個頁面時,頁面並非立即就展現的,由於parser在dom加載完畢之后才會對整個頁面進行解析,當頁面組件使用較多的時候,完整的解析組件必然須要耗費較多的時間,這一過程可能就會出現短暫的界面混亂現象。解決的辦法就是:利用 onComplete事件再結合一個加載遮罩層 就攻克了。
詳細的實例能夠看例如以下代碼:
<!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”的樣式,這時候就須要我們手動去結下了。只是這里需注意例如以下方面，上面也有提及。
- 解析目標位指定DOM的全部子孫元素,不包好該DOM本身:因此正確的寫法為:$parser.parser($('tt').parent()),並不是
$.parser.parse($('#tt')); - 盡量不要多次解析同一個DOM元素(ID):頁面初始化就已經主動渲染過dom節點了,你再次手動解析該dom節點時該dom已經被parser重構,得到的DOM就並不是是你料想的結果，該方式應該盡量避免。