easyUI基础-parser解析器.md · baoke/EasyUI

### Parser(解析器)

解析器是easyui非常重要的基础组件,在easyui中我们能够简单的通过class定义一个组件,从而渲染出非常好的交互效果。就是通过parser进行解析的。parser会获取所有在指定范围内定义为easyui组件的class定义,并且根据后缀定义把当前节点解析渲染成特定的组件。

**parser可以有两种使用方法:**

```
1、$.parser.parse();不带参数,默认解析该页面中所有被定义为easyui组件的节点。 
2、$.parser.parse('#cc');带一个jquery选择器，使用这种方式我们可以单独解析局部的easyui组件节点。 
```

不过这里要说明的是这个jquery选择器必须是你解析组件的父级以上的节点。也就是说这个查找出来的节点相当于一个容器,它只会解析容器里面的内容。

$.parser.onComplete是easyui语法解析完成之后触发的事件,这个事件是十分有用的。例如在加载一个页面时,页面并不是马上就展现的,因为parser在dom载入完毕之后才会对整个页面进行解析,当页面组件使用较多的时候,完整的解析组件必定需要耗费较多的时间,这一过程可能就会出现短暂的界面混乱现象。解决的办法就是:利用onComplete事件再结合一个载入遮罩层就解决了。
具体的实例可以看如下代码:

```html
<!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(解析器)应用场景

最主要的运用场景,只要我们书写相应的class,easyui就能成功的渲染页面,这是因为解析器在默认情况下,会在dom加载完成的时候($(docunment).ready)被调用,而且是渲染整个页面。

### 自动调用parser

###  手动调用parser

需要手动调用的情况是:当页面已经加载完成,但是此时我们使用js生成的DOM中包含了easyui支持的class,并且我们也有将其渲染成easyui组件的需求。在这种情况下手动调用parser就不可避免了。

### 以如下代码为例:

```html
    <div class="easyui-accordion" id="tt">
            <div title="title1">1</div>
            <div title="title2">2</div>
    </div>
```

当上述代码的生成在easyui渲染界面之后,由于easyui不会一直监听页面,所以该段代码并不会并渲染成“手风琴DIV”的样式,这时候就需要我们手动去结下了。不过这里需注意如下方面，上面也有提及。

(1) 解析目标为指定DOM的所有子孙元素，不包含这个DOM自身:

比如上面代码生成的HTML，id="tt"是我们想要的手风琴DIV，像下面代码去手工解析的话是得不到你想要的结果的：

```typescript
 $.parser.parse($('#tt')
```

道理很简单，parser只渲染tt的子孙元素，并不包括tt自身，而它的子孙元素并不包含任何Easyui支持的控件class，所以这个地方就得不到你想要的手风琴效果了，应该这样写：

```js
$.parser.parse($('#tt').parent())
```

渲染tt的父节点的所有子孙元素就可以了，个人觉得通过jQuery的parent()方法是最安全不过的了，不管你的javascript输出了什么DOM，直接渲染其父节点就可以保证页面能被正确解析。

**(2) 某些组件无法多次解析同一个DOM元素：(这就能解决我以前通过DOM动态拼接html元素的时候无法加载easyui效果的问题)**

如果页面上本身就有tt元素：

```cobol
<div class="easyui-accordion" id="tt">
</div>
```

页面装载完，你通过脚本向tt元素append两个子DIV，然后解析：

```xml
$('#tt').append('<div title="title1">1</div><div title="title2">2</div>')
$.parser.parse($('#tt').parent());
```

不要以为你会得到一个满意的accordion，你什么也得不到，因为页面初始化的时候parser就主动渲染过tt元素，这时候tt已经被parser重构，你再到脚本中append，得到的DOM结构，其实并不是你预想的结果了，所以要避免这种用法。

baoke/EasyUI

简介

发行版

贡献者

近期动态

baoke/EasyUI .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

baoke/EasyUI