• 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就并不是是你料想的结果。该方式应该尽量避免。
  • 相关阅读:
    ORACLE常用SQL(session&badSql)
    归档日志满解决方法
    SPRING MVC总结
    Java中分割字符串
    无废话ExtJs 入门教程二十一[继承:Extend]
    无废话ExtJs 入门教程二十[数据交互:AJAX]
    WAMP 80端口被Microsoft-HTTPAPI/2.0占用的解决办法
    WampServer安装图解教程
    vmware tools安装程序无法继续,Microsoft Runtime DLL安装程序未能完成安装。的解决方法
    WordPress添加网站图标
  • 原文地址:https://www.cnblogs.com/zsychanpin/p/6758941.html
Copyright © 2020-2023  润新知