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

時間 2019-12-11

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

原文原文鏈接

前言

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

EasyUI體系結構

EasyUI全部的插件主要分爲六大部分。Base基礎、Layout佈局、Menu&Button、Form表單、Window窗口等。從最基礎的開始先掌握EasyUI基礎部分。Base部分包含了八個基礎插件分別爲:html

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

咱們先從parser開始。java

Parser(解析器)

解析器是easyui很是重要的基礎組件,在easyui中咱們可以簡單的經過class定義一個組件,從而渲染出很是好的交互效果。就是經過parser進行解析的。parser會獲取全部在指定範圍內定義爲easyui組件的class定義,而且根據後綴定義把當前節點解析渲染成特定的組件。jquery

parser能夠有兩種使用方法: dom

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

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

parser屬性:學習

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

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

根據上表$.parser.onComplete是easyui語法解析完成以後觸發的事件,這個事件是十分有用的。例如在加載一個頁面時,頁面並非立刻就展示的,由於parser在dom載入完畢以後纔會對整個頁面進行解析,當頁面組件使用較多的時候,完整的解析組件一定須要耗費較多的時間,這一過程可能就會出現短暫的界面混亂現象。解決的辦法就是:利用onComplete事件再結合一個載入遮罩層就解決了。ui

具體的實例能夠看以下代碼:this

<!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解析完畢以後,遮罩層就消失，正常顯示頁面內容（彈出數據加載完成彈出框）。spa

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

相關標籤/搜索

每日一句

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