EasyUI

最新推荐文章于 2020-09-25 17:01:18 发布

S_L__

最新推荐文章于 2020-09-25 17:01:18 发布

阅读量644

点赞数

分类专栏：前端文章标签： jQuery EasyUI

本文链接：https://blog.csdn.net/S_L__/article/details/96508353

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.EasyUI简介

1.1.jQuery EasyUI

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。这里介绍jQuery 版本的
(1)是一组基于jQuery的UI(用户界面)插件集合;
(2)Easyui是属于前端框架

1.2.官方网站

学习网站：
http://www.jeasyui.com/ 英文网
http://www.jeasyui.net/ 中文网

1.3.EasyUI框架项目结构

1.3.1.目录截图
在这里插入图片描述 1.3.2.子目录说明
demo :web案例
demo-mobile:移动端案例
locale:本地化（汉化包）
plugins:easyui所有插件
src:插件的源码，如果买了商业授权就有全部源码
themes：主题（皮肤），存放css,img
changlog.txt:升级日志
easyloader.js:内部实现了一个js加载器，根据应用的需求加载js文件，而不是一次性加载所有文件；
jquery.easyui.min.js:所有插件集的压缩文件
jquery.min.js : easyui当前版本兼容的jquery库

2.搭建easyui环境

2.1.web项目加入easyui的项目文件夹

建议创建webapp的项目文件名，同maven标准命名
最好不要携带easyui的版本号，升级的时候修改就不是很方便了

在这里插入图片描述

2.2.新建一个公共网页common.jsp

引入easyui需要的js和css；可参考jQuery EasyUI 1.5 版 API 中文版.exe/文档说明。

<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->   
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<!-- easyui依赖的jquery库(jquery依赖包,必须放在插件库和汉化包的前面)-->   
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<!-- easyui的插件库-->      
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>

3.创建组件

Easyui可以通过HTML或JavaScript创建组件;

3.1.方式一:HTML创建组件的方式

<标签 class=”easyui-组件名” 
组件配置title=“xxx” 
data-options=”title:’xxx’”></标签>
	引用数据类型:Object

<!--
	 使用html创建easyui组件(最简单方式)
		class = "easyui-panel" 作用: 告诉easyui需要把div转化为easyui组件.
		style 作用: 设置组件宽高和其他样式.
		title,iconCls,collapsible 组件属性: 告诉easyui如何创建这个组件.
-->
	<div id="p1" class="easyui-panel"
		style="width: 400px; height: 400px; padding: 10px; color: red; font-weight: bold; font-size: 18px;" title="我的面板"
		iconCls="icon-ok" collapsible="true">
		<h1>内容xxxx</h1>
	</div>
	引用数据类型:Object

3.2.方式二:Js代码创建组件

引用数据类型:Object

<script type="text/javascript">
	$(function() {
		//获取p2标签,把他变成easyui面板组件.
		$("#p2").panel({
			//面板属性
			title : "你的面板",
			iconCls : "icon-no"
		});
	});
</script>
<div id="p2" style="width: 400px; height: 400px; padding: 10px; color: red; font-weight: bold; font-size: 18px;">
	<h1>是你面板</h1>
</div>
	引用数据类型:Object

4.EasyUI创建组件的原理(html创建的方式)

平时写的class="easyui-panel" -最终还是调用js的方式来创建，$(“#p”).panel({json参数}); 
		a)底层通过 $.parser.auto=ture 
		b)调用parse方法
		c)循环页面的组件 找到对应 easyui-panel
		d)找到之后，调用 panel({})创建组件
		e)panel底层组装html

5.LinkButton组件:链式按钮

Linkbutton组件需要通过<a>进行创建；
<script type="text/javascript">
	$(function(){
		$("#editBtn").on("click",function(){
			console.debug("编辑...");
		});
		
		$("#cutBtn").on("click",function(){
			//组件的disabled禁用属性,无法控制事件.
			if($(this).hasClass("l-btn-disabled")){//判断按钮是否有禁用样式.
				console.debug("剪切...");	
			}
		});
	});
//$.parser.auto = false;//设置为fsalse后,将不会自动去解析为easyui组建
</script>
<body>
	<!-- 
		linkbutton组件:
		属性:
			iconCls:按钮图标
			toggle：为true时允许用户切换其状态是被选中还是未选择,结合group来使用,在一组里面只能选中一个
			group：分组
			plain：简洁的效果,其实就是没有背景;
			iconAlign：按钮图标位置;可以选值为left,right;默认为:left;
			data-options：可以设置组件的属性
			disabled：禁用样式
	 -->
	<a href="#" class="easyui-linkbutton" iconCls='icon-remove' toggle="true" onclick="alert('删除....');">删除</a>
	<a href="#" class="easyui-linkbutton" iconCls='icon-edit' plain="true" iconAlign="right" id="editBtn">编辑</a>
	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true" id="cutBtn">剪切</a>
	
	
	 <div style="padding:5px;border:1px solid #ddd;">
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 2</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 3</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 4</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 5</a>
	</div>
</body>
	引用数据类型:Object

6.Panel组件:面板组建

6.1.需要通过
进行创建

面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。

知识点:
1.组件在定义的时候，就把属性设置好，不要加载完 再去修改属性,这个时候只能修改body
2.panel属性:
iconCls:面板标题的图标;
collapsible:定义是否显示可折叠按钮。
minimizable:定义是否显示最小化按钮。
maximizable:定义是否显示最大化按钮。
closable:定义是否显示关闭按钮。
tools : 自定义工具按钮.  参数是一个选择器,代表选择器获取元素中的内容就是工具按钮.
fit:设置为true的时候面板大小"将自适应父容器"; 简单理解: 父容器多大,我就多大. 使用了该属性后,我们设置宽高将失效.
href:  从URL读取远程数据并且显示到面板; 一般用于加载动态的内容比较有用.  (只加载body里面内容) 一旦设置,那么面板标签中内容会被覆盖掉.
closed : 设置面板是否显示.
loadingMessage:加载远程数据的时候在面板内显示一条消息。

<script type="text/javascript">
			$(function(){
				$("#p").panel({	//无效
					left:'100px',
					cls:'mypanel'
				});
				//只能修改body的宽度
				$("#p").css('width','800px');
				//只能隐藏body
				$("#p").hide();
				//修改body
				$("#p").attr('title','yyyyyyyy');
			});
		</script>
<div id="p" class="easyui-panel" title="面板1"
		style="width: 300px; height: 200px; padding: 10px;" 
		iconCls="icon-save"
		collapsible="true"
		minimizable="false"
		maximizable="true"
		closable="true"
		tools="#tt"
		fit="false"
		loadingMessage="加载中..."
		href="/panel_content.txt"
	>
	<a class="easyui-linkbutton" iconCls="icon-add">添加</a>
	<a class="easyui-linkbutton" iconCls="icon-remove">删除</a>
</div>

 <div id="tt">
	<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
	<a href="javascript:void(0)" class="icon-ok" onclick="javascript:alert('ok')"></a>
</div>

6.2.panel面板的组成(标签html结构)

面板头<div class="panel-header"> 和 面板的内容<div class=”panel-body”>

<div id="p1" cls="mypanel" title="哈哈" style="width: 200px;height: 200px;">	
	</div>	
panel组件被创建后:
<div class="panel mypanel"
		style="display: block; left: 500px; width: 200px;">
		<div class="panel-header" style="width: 188px;">
			<div class="panel-title">哈哈</div>
			<div class="panel-tool"></div>
		</div>
		<div style="width: 198px; height: 171px;" title="" cls="mypanel"
			id="p1" class="panel-body">你好吗???</div>
</div>
6.3.理解：Panel面板并不是每个属性都可以直接使用
<style type="text/css">
.mypanel {
	position: absolute;
}
</style>

<script type="text/javascript">
	$(function() {
		$("#p1").panel({//创建一个easyui的组件
			content : "你好吗???",
			left : "500px",
			cls : 'mypanel'
		});
		
		//以下操作都是错误的,因为控件(a,div)一旦变成了一个easyui组件,我们就不能使用"元素对象"操作方式去操作这个组件,我们应该按照easyui组件操作方式.
		//$("#p1").width("800px");//只能操作body
		//$("#p1").hide();//只能操作body
		//$("#p1").attr("title","呵呵");//只能操作body
	});
</script>
</head>
<body>
	<div id="p1" cls="mypanel" title="哈哈" style="width: 200px; height: 200px;"></div>
</body>

7.组件三要素

Easyui组件都具有属性、方法、事件；

7.1.属性

（一）组件的属性：

描述组件的信息 比如title width height..
		（a） 每一个组件创建出来的时候，都有默认属性
			  $.fn.panel.defaults
			  console.log($.fn.panel.defaults);
			  //关闭按钮
			   $.fn.panel.defaults.closable = true;
			  一般不会修改组件的默认属性，如果要改，在组件里面自己定义组件的属性
		 (b) 属性在创建的时候，就应该定义好，不要在创建完才去修改属性
			  $("#p1").attr("title","你的面板");//无效
			  $("#p1").attr("closed","true");//无效

		<script type="text/javascript">
			$(function(){
				//调用panel方法创建组件
				$("#p2").panel({
					title:'测试',
					closable:true
				});
				$("#mybtn").click(function(){
					//关闭panel
					$("#p2").panel('close');
				});
				$("#mybtn1").click(function(){
					//打开panel
					$("#p2").panel('open');
				});
				$("#mybtn2").click(function(){
					//刷新panel
					$("#p2").panel('refresh','xxx.txt');
				});
				//调用非easyui组件 的组件的方法 -- 不OK $("#p3").panel('close');
			});
		</script>

	<body>
		</div>-->
			<a href="#" id="mybtn" class="easyui-linkbutton" iconCls="icon-remove">关闭</a>
			<a href="#" id="mybtn1" class="easyui-linkbutton" iconCls="icon-ok">打开</a>
			<a href="#" id="mybtn2" class="easyui-linkbutton" iconCls="icon-reload">刷新</a>
		<div id="p2">
			sdfsdfsdf
		</div>
		<div id="p3">
			....sdfsdfsdf
		</div>
	</body>

（二）使用html定义属性的3种方式

(1)直接作为标签的自定义属性
<div class="easyui-panel" title="面板标题" closed="true"></div>   title,closed都是自定义属性;
(2)	使用html5中规范data属性. data-options
<div class="easyui-panel" data-options="title:'面板标题',closed:true"></div>
(3)	以上两种混合使用
<div class="easyui-panel" title="面板标题" data-options="closed:true"></div>
(4)以上两种混合的区别
自定义属性的值只能是一个普通的字符串,不能写事件函数名和json数组.

			<div id="p1" class="easyui-panel" title="我的面板" closed="false" tools="[
						{
							iconCls:'icon-add',
							handler:function(){alert('add')}
						},{
							iconCls:'icon-edit',
							handler:function(){alert('edit')}
						}]">
				p1
			</div>
			data-options属性的值可以写函数名和json数组.
			<div id="p1" class="easyui-panel" title="我的面板" closed="false" data-options="tools:[
						{
							iconCls:'icon-add',
							handler:function(){alert('add')}
						},{
							iconCls:'icon-edit',
							handler:function(){alert('edit')}
						}]">
				p1
			</div>

(5)	使用js来创建		
使用js创建的时候通过json对象传入

			$("#p1").panel({
				title:"标题",
				closed:false
			});

<body>
	<div id="p1" class="easyui-panel" title="我的面板" closed="false">	p1	</div>
	<a class="easyui-linkbutton" id="changeTitle">修改面板标题</a>	
</body>

7.2.方法

（一）创建组件的语法

$('selector').plugin(); //没有传递参数  比如 panel（）  
$('selector').plugin({}); //传递json参数

（二）调用方法的语法

$('selector').plugin('method', [parameter]); 
selector 是jQuery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。

（三）总结

如果写了easyui组件之后传入的第一个参数是字符串,那么就代表执行组件上面某一个方法,
如果不是一个字符串那么就是创建组件，传入的参数是json字符串；如果没有传入参数还是创建组件.

（四）定义：方法其实就是组件中的某个功能

我们可以调用组件中方法，从而达到我们要求。比如：现在我想隐藏页面中的某个面板。 $(“#mypanel”).panel(“close”);

<script type="text/javascript">$(function(){
	$("#openBtn").on("click",function(){
		//获取要操作面板
		var p1 = $("#p1");
		//一旦一个元素变成一个组件,请使用组件方法来操作它.
		p1.panel("open");  // 调用panel组件的open方法. 千万别乱搞,p1.open();
	});
	$("#closeBtn").on("click",function(){
		$("#p1").panel("close");
	});
	$("#loadBtn").on("click",function(){
		//刷新面板来装载远程数据。如果'href'属性有了新配置，它将重写旧的'href'属性。 
		$("#p1").panel("refresh","panel_content.txt?hehe=xxx&xxx=aaaa"); 
	});
});
</script>
<body>
	<a id="openBtn" class="easyui-linkbutton" href="javascript:;">打开面板</a>
	<a id="closeBtn" class="easyui-linkbutton" href="javascript:;">隐藏面板</a>
	<a id="loadBtn" class="easyui-linkbutton" href="javascript:;">加载远程内容</a>	
	
<div id="p1" class="easyui-panel" href="panel_content.txt" title="我的面板" closed="true">
		p1111111111111111
	</div>	
	<div id="p2" title="我的面板">
		p2222222222222
	</div>
	<script type="text/javascript">
	//不能使用一个非组件的对象,调用组件方法.
	$("#p2").panel("open");
</script>
<script type="text/javascript">
	$("#p2").panel(); //或者 $("#p2").panel({}); 都代表创建组件,或者就是调用方法.
	$("#p2").panel("open");
</script>

（五）注意点

如果尝试调用一个非组件的组件方法那么直接报错；
在这里插入图片描述
创建组件和调用方法的区别

以上代码调用方法

7.3.事件

（一）定义：

如果组件发生了什么事情那么它就会通过事件反应给我们。比如：我们点击tree组件的某个节点，那么就会触发onClick事件。
所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。
注意：注册事件不能采用dom传统方式注册，需要通过组件注册；

（二）树状菜单

效果;

<script type="text/javascript">
			$(function() {
				$('#tt').tree({
					method: 'get',
					url: 'treedata.json',
					onClick: function(node) {
						console.log(node.target)
						console.log(node.text);
					},
					//表示event 事件對象 node：节点
					onContextMenu: function(e, node) {
						e.preventDefault(); //阻止浏览器默认的右键弹出
						// 显示快捷菜单
						$('#mm').menu('show', {
							left: e.pageX,
							top: e.pageY
						});
					}
				});
			});
		</script>

	<body>
		<ul id="tt" class="easyui-tree">
			
		</ul>
		<div id="mm" class="easyui-menu" style="width:120px;">
			<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
			<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
		</div>
</body>

（三）树需要的Json数据的格式

[
	{
		"id": 1,
		"text": "组织机构",
		"iconCls": "icon-save",
		"children": [{
			"id": 11,
			"text": "部门管理",
			"iconCls": "icon-ok",
			"url": "department.action"
		},{
			"id": 12,
			"text": "员工管理",
			"iconCls": "icon-ok",
			"url": "employee.action"
		}]
	},
	{
		"id": 2,
		"text": "系统管理",
		"iconCls": "icon-save",
		"children": [{
			"id": 13,
			"text": "权限管理",
			"iconCls": "icon-ok",
			"url": "permission.action"
		},{
			"id": 14,
			"text": "角色管理",
			"iconCls": "icon-ok",
			"url": "role.action"
		}]
	}
]

8.右键菜单(上下文菜单)

效果: 在这里插入图片描述

<script type="text/javascript">
			$(function() {

				$(document).on('contextmenu', function(event) {
					//阻止浏览器默认的右键事件
					event.preventDefault();
					//弹出
					$("#mm").menu('show', {
						left: event.pageX,
						top: event.pageY
					})
				})
			});
		</script>

	<body>
		<div id="mm" class="easyui-menu" style="width:120px;">
			<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
			<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
		</div>
	</body>