加载EasyUi和使用Parser解析器

最新推荐文章于 2019-11-25 22:30:37 发布

原创最新推荐文章于 2019-11-25 22:30:37 发布 · 972 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了EasyUI组件库的两种加载方式：通过class属性直接加载和使用JS动态加载，并详细解释了如何利用Parser解析器控制组件的加载过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 EasyUi的加载方式：

1 使用class方式加载：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- <script type="text/javascript" src="js/easyuiload.js"></script> -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<!-- <div class="easyui-dialog" style="width:400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
        dialog content.
</div> -->
<div id="box" class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div>
<!-- <div id="box" style="width:400px;height:200px" title="提示标题">
提示内容
</div> -->

<!-- <div id="box">
<div  class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div>
</div> -->
</body>
</html>

使用class指定对应的ui组件，class="easyui-组件名称",完成加载对应组件。

2使用js方式加载ui组件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/easyuiload.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<!-- <div class="easyui-dialog" style="width:400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
        dialog content.
</div> -->
<!-- <div id="box" class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div> -->
<div id="box" style="width:400px;height:200px" title="提示标题">
提示内容
</div>

<!-- <div id="box">
<div  class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div>
</div> -->
</body>
</html>

js/easyuiload.js

$(function(){
	$("#box").dialog();
/*	$.parser.parse("#box");*/
});

/*$.parser.auto=false;
$.parser.onComplete=function(){
	alert("UI OK");
};*/

引入js/easyuiload.js ，在页面加载完后加载easyui.

二 Parser解析器：

parser解析器，解析easyui组件,用来指定class加载组件的情况下，哪些组件会加载，哪些组件不需要加载。

默认，全部加载。若想全不加载，则在js添加，在页面加载完成前执行$.parser.auto=false;

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/easyuiload.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<!-- <div class="easyui-dialog" style="width:400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
        dialog content.
</div> -->
<!-- <div id="box" class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div> -->
<!-- <div id="box" style="width:400px;height:200px" title="提示标题">
提示内容
</div> -->

<div id="box">
<div  class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div>
</div>
</body>
</html>

$(function(){
	/*$("#box").dialog();*/
/*	$.parser.parse("#box");*/
});

$.parser.auto=false;
/*
$.parser.onComplete=function(){
	alert("UI OK");
};*/

此时class指定的组件不会被加载。

若想加载id="box"的组件，则需要修改js

$(function(){
	/*$("#box").dialog();*/
	$.parser.parse("#box");
});

$.parser.auto=false;
/*
$.parser.onComplete=function(){
	alert("UI OK");
};*/

注意

$.parser.parse("#box");

选择器必须是组件容器的父级容器，最外层的div id.否则不生效。

此外，当

$.parser.parse();

没有参数的时候，会加载全部ui组件。

对于easyui加载完成想要执行一个回调函数，可以通过下面的方式实现

$(function(){
	/*$("#box").dialog();*/
	$.parser.parse("#box");
});

$.parser.auto=false;

$.parser.onComplete=function(){
	alert("UI OK");
};

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">onComplete

指定的回调函数只有在ui加载成功后才会执行，否则不执行。