【连载】研究EasyUI系统—Parser组件

最新推荐文章于 2023-07-14 16:19:24 发布

我想我是人

最新推荐文章于 2023-07-14 16:19:24 发布

阅读量943

点赞数

分类专栏： easyui 文章标签： easyui parser

本文链接：https://blog.csdn.net/redeg/article/details/54021393

版权

easyui 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

　　Parser是EasyUI框架中用于解析渲染诸如TextBox、LinkButton、Datagrid等等各类组件的基本模块，也是EasyUI框架运行的必要条件。
　　parser的属性、事件和方法都非常简单。见下表。

Parser属性表

属性名称	属性值类型	默认值	描述
$.parser.auto	布尔值	true	是否自动解析easyui组件

Parser方法表

方法名称	参数	描述
$.parser.parser	context	分析制定组件，参数context为目标组件的jQuery对象

Parser事件表

事件名称	参数	描述
$.parser.onComplete	context	组件解析完成后触发该事件

　　$.parser.auto属性指定是否自动解析组件，如果设为true则表明自动解析，页面加载完毕后所有easyui组件将被渲染成标准的easyui样式。如果设为false，则需要手动进行渲染，easyuui很多组件本身是基于div进行构件的，那么渲染前，它仅仅是个div标记，在页面中没有特别的显示，而渲染完成后则成了我们看到的easyui组件。

　　$.parser.parse方法用于手动渲染组件。当$.parser.auto属性设定为false的时候，就需要调用$.parser.parse来手动渲染指定的组件。该方法可以有参数，也可以没有参数。没有参数时方法将解析页面中所有的组件。参数context指定了待解析的组件，并且是一个jQuery对象，如$(“#target”).parent()。特别需要说明的一点是，假如我们需要解析一个progressbar组件，那么context参数应该是progressbar组件的父元素，因为$.parser.parse进行解析时，只解析context参数对应DOM的子孙节点，context本身对应的DOM节点并不被解析。
　　
　　$.parser.onComplete事件在组件解析完成后触发。如果对整个页面所有组件进行解析，是不需要用到参数context的；如果对指定组件进行解析，context则是该指定组件的父节点jQuery对象。这与$.parser.parse方法中的context对应。

<html>
  <head>
    <link rel="stylesheet" type="text/css"href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css"href="easyui/themes/icon.css" />
    <script type="text/javascript"src="easyui/jquery.min.js"></script>
    <script type="text/javascript"src="easyui/jquery.easyui.min.js"></script>
    <script>
      $("#pb").hide(); // 初始时先隐藏进度条
      $.parser.auto = false;
      $.parser.onComplete = function(context) {
      $("#pb").show(); // 渲染完成后显示进度条
        alert("渲染完成");
      }

      function pareseMe() {
        /*
        参数为进度条的父元素jQuery对象
        即class为container的div元素
        */
        $.parser.parse($("#pb").parent());
      }
    </script>
  </head>
  <body>
    <div class="container">
       <div id="pb" class="easyui-progressbar"></div>
    </div>
    <button id="btnParser" onclick="pareseMe()">开始渲染</button>
  </body>
</html>

　　上例代码中，我们先隐藏了id为pb的进度条组件，随后设置为手动解析，等组件解析完成后再显示进度条。点击“开始渲染”按钮后，即开始解析。此处，解析的是进度条的父元素，即<div class="container">，所以onComplete中的参数context也是<div class="container">。
　　easyui框架的特点是必须等页面所有的DOM节点元素都加载完毕之后，再对组件进行渲染。如果一张页面中含有比较多的easyui组件，将会出现初始时界面混乱，随后恢复正常的现象，虽然这并非是Bug，但给用户的印象总归不好。示例代码中我们通过先隐藏组件，加载完成后再显示组件的方式来避免界面混乱（其实本示例代码只有一个组件，几乎不会出现界面混乱的现象）。一般我们在商用系统开发中，通过给页面加上一个遮罩层，等组件加载完毕后，在onComplete事件中再取消遮罩层来防止出现界面混乱的现象。