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

時間 2019-11-08

標籤 easyui 基礎入門 parser 解析简体版

原文原文鏈接

前言

JQuery EasyUI提供的組件包含功能強大的DataGrid,TreeGrid、面板、下拉組合等。

用戶可以組合使用這些組件,也可以單獨使用當中一個。javascript

(使用的形式是以插件的方式提供的) html

EasyUI體系結構

EasyUI所有的插件主要分爲六大部分。

Base基礎、Layout佈局、Menu&Button、Form表單、Window窗體等。從最基礎的開始先掌握EasyUI基礎部分。java

Base部分包括了八個基礎插件分別爲: jquery

parser(解析器)
easyloader(載入器)
draggable(拖動)
droppable(放置)
resizable(大小調整)
pagination(分頁)
progressbar(進度條)
searchbox(搜索框)

咱們先從parser開始。

Parser(解析器)

解析器是easyui很重要的基礎組件,在easyui中咱們能夠簡單的經過class定義一個組件,從而渲染出很好的交互效果。就是經過parser進行解析的。dom

parser會獲取所有在指定範圍內定義爲easyui組件的class定義,並且依據後綴定義把當前節點解析渲染成特定的組件。佈局

parser可以有兩種用法: 學習

一、$.parser.parse();不帶參數,默認解析該頁面中所有被定義爲easyui組件的節點。
 
二、$.parser.parse('#cc');帶一個jquery選擇器，使用這樣的方式咱們可以單獨解析局部的easyui組件節點。ui

只是這裏要說明的是這個jquery選擇器必須是你解析組件的父級以上的節點。也就是說這個查找出來的節點至關於一個容器,它僅僅會解析容器裏面的內容。

parser屬性: this

名稱	類型	描寫敘述	默認值
$.parser.auto	boolean	定義是否本身主動解析easyui組件	true

名稱	參數	描寫敘述
$.parser.onComplete	context	當語法解析完畢以後觸發的event

依據上表$.parser.onComplete是easyui語法解析完畢以後觸發的事件,這個事件是十分實用的。好比在加載一個頁面時,頁面並不是當即就展示的,因爲parser在dom加載完畢以後纔會對整個頁面進行解析,當頁面組件使用較多的時候,完整的解析組件必然需要耗費較多的時間,這一過程可能就會出現短暫的界面混亂現象。

解決的辦法就是:利用onComplete事件再結合一個加載遮罩層就攻克了。spa

詳細的實例可以看例如如下代碼:

<!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就並非是你料想的結果。該方式應該儘可能避免。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。