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就并非是你料想的结果。该方式应该尽可能避免。