zoukankan      html  css  js  c++  java
  • EasyUI基础入门之Parser(解析器)

    前言

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

    EasyUI体系结构

         EasyUI全部的插件主要分为六大部分。Base基础、Layout布局、Menu&Button、Form表单、Window窗体等。从最基础的開始先掌握EasyUI基础部分。Base部分包括了八个基础插件分别为:
    1. parser(解析器)
    2. easyloader(载入器)
    3. draggable(拖动)
    4. droppable(放置)
    5. resizable(大小调整)
    6. pagination(分页)
    7. progressbar(进度条)
    8. searchbox(搜索框)
         我们先从parser開始。

    Parser(解析器)

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

          parser能够有两种用法: 

    1、$.parser.parse();不带參数,默认解析该页面中全部被定义为easyui组件的节点。 
    2、$.parser.parse('#cc');带一个jquery选择器,使用这样的方式我们能够单独解析局部的easyui组件节点。 
           只是这里要说明的是这个jquery选择器必须是你解析组件的父级以上的节点。也就是说这个查找出来的节点相当于一个容器,它仅仅会解析容器里面的内容。

          parser属性:

          

    名称 类型 描写叙述 默认值
    $.parser.auto
    boolean 定义是否自己主动解析easyui组件 true

     

    名称 參数 描写叙述
    $.parser.onComplete
    context 当语法解析完毕之后触发的event

           依据上表$.parser.onComplete是easyui语法解析完毕之后触发的事件,这个事件是十分实用的。比如在加载一个页面时,页面并非立即就展现的,由于parser在dom加载完毕之后才会对整个页面进行解析,当页面组件使用较多的时候,完整的解析组件必然须要耗费较多的时间,这一过程可能就会出现短暂的界面混乱现象。解决的办法就是:利用onComplete事件再结合一个加载遮罩层攻克了。

           详细的实例能够看例如以下代码:

    <!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就并不是是你料想的结果,该方式应该尽量避免。
  • 相关阅读:
    HDU 5818 Joint Stacks
    HDU 5816 Hearthstone
    HDU 5812 Distance
    HDU 5807 Keep In Touch
    HDU 5798 Stabilization
    HDU 5543 Pick The Sticks
    Light OJ 1393 Crazy Calendar (尼姆博弈)
    NEFU 2016省赛演练一 I题 (模拟题)
    NEFU 2016省赛演练一 F题 (高精度加法)
    NEFU 2016省赛演练一 B题(递推)
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/3776035.html
Copyright © 2011-2022 走看看