EasyUI Base - parser(解析器)

前言

EasyUI的组件包括功能强大的DataGrid, TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的)


EasyUI体系结构

如图所示,EasyUI所有的插件主要分为六大部分:
这里写图片描述

Base部分的插件有:
这里写图片描述

其他部分可以参见API:http://pan.baidu.com/s/1pL6O7hD


Parser(解析器)

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

JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的)

两种使用方法:

$.parser.parse();       // 解析整个页面 
$.parser.parse('#cc');  // 解析指定元素

注意第二个函数会渲染该容器下的所有元素,但不包括自身

其他的属性参考请API文档,如可以指定渲染完成的行为等。


什么时候使用Parser

一般情况下Parser我们是不需要使用的,如通过class指定渲染和js代码指定渲染,这些情况EasyUI会自动解析。

使用Parser的场景:

当页面加载完成后, 使用js生成的DOM元素中包含了EasyUI支持的class, 并想将其渲染成EasyUI组件

例子:

$(function(){
    var $panel = $("<div id='my-panel' class='easyui-panel' title='我的面板'>luoluolzb</div>");
    $panel.css("width", "300px");
    $panel.css("height", "200px");
    $(document.body).append($panel);
    $.parser.parse($panel.parent());
});

使用js动态创建了一个div并赋予了EasyUI的class,但如果我们不手动解析,会发现这个div的样式并没有变:
这里写图片描述

手动解析后:
这里写图片描述

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值