EasyUI

最新推荐文章于 2021-11-30 16:41:19 发布

菜鸟hyn

最新推荐文章于 2021-11-30 16:41:19 发布

阅读量270

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/HYN205/article/details/90545133

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是EasyUI？

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

EasyUI的使用

引入EasyUI的开发JS和CSS

EasyUI的使用有两种方式：

CSS样式：

JS样式

EasyUI布局

EasyUI布局介绍

使用$.fn.layout.defaults重写默认值对象。

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

EasyUI的布局使用

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
	<div id="cc" class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north',title:'管理系统',split:true" style="height: 100px;"></div>
		<div data-options="region:'west',title:'菜单栏',split:true" style="width: 100px;"></div>
		<div data-options="region:'center',title:'数据区'" style="padding: 5px; background: #eee;"></div>
	</div>
</body>
</html>

data-options="fit:true" ：填充整个页面

fit：boolean，如果设置为true，布局组件将自适应父容器，当使用‘body’标签创建布局的时候，整个页面会自动最大，默认值为false

title：布局面板标题文本

region：定义布局面板位置，可用的值有：north、west、center、south、east

split：为true时用户可以通过分隔栏改变面板大小，默认值时false

EasyUI分类

EasyUI分类介绍

使用$.fn.accordion.defaults重写默认值对象。

分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。

EasyUI分类使用

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>   
        <p>Accordion is a part of easyui framework for jQuery.     
        It lets you define your accordion component on web page more easily.</p>   
    </div>   
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
        content2    
    </div>   
    <div title="Title3">   
        content3    
    </div>   
</div>  
</body>
</html>

面板属性：

selected：设置为true将展开面板

事件：onSelect(title,index)：在面板被选中的时候触发

EasyUI选项卡

EasyUI选项卡介绍

使用$.fn.tabs.defaults重写默认值对象。

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

EasyUI选项卡使用

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn").click(function(){
			//判断选项卡是否存在
			var flag = $("#tt").tabs("exists","客户管理");
			if(flag){
				//选项卡存在，选中
				$("#tt").tabs("select","客户管理");
			}else{
				//选项卡不存在，创建
				$("#tt").tabs('add',{    
				    title:'客户管理',    
				    content:'客户管理',    
				    closable:true   
				});  
			}
		});
	});
</script>
</head>
<body>
	<a id="btn" href="#" class="easyui-linkbutton">按钮</a>
	<div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;">
		<div title="数据区域" style="padding: 20px; display: none;">
			数据区域
		</div>
	</div>
</body>
</html>

EasyUI数据表格

EasyUI数据表格介绍

扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

数据表格使用

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function(){
		$("#dg").datagrid({    			
		    url:'datagrid_data1.json',
		    columns:[[    
		        {field:'productid',title:'商品编号',width:100},
		        {field:'productname',title:'商品名称',width:100},
		        {field:'unitcost',title:'商品单价',width:100,align:'right'},
		        {field:'status',title:'商品状态',width:100,align:'right'},
		        {field:'attr1',title:'商品属性',width:100,align:'right'},
		        {field:'xxx',title:'操作',width:100,align:'left',formatter: function(value,row,index){
					return "<a href='#'>修改</a>|<a href='#'>删除</a>"
				}
		        }
		    ]],
		    striped:true,
		    pagination:true
		    
		}); 
	});
</script>
</head>
<body>
	<table id="dg"></table>  
</body> 
</html>

DataGrid属性

striped：显示斑马线效果，默认为false

pagination：如果为true，则在DataGrid控件底部显示分页工具栏，默认为false，引入后为英文，显示中文需要引入

<script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>

列属性

title：列标题文本

field：列字段名称

formatter：单元格formatter函数，带3个参数，value字段值、rowData行记录数、rowindex行索引

EasyUI窗口

EasyUI窗口介绍

扩展自$.fn.panel.defaults。使用$.fn.window.defaults重写默认值对象。

窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

EasyUI窗口使用

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#win').window({
			width : 600,
			height : 400,
			modal : true
		});
	});
</script>
</head>
<body>
	<div id="win"></div>
</body>
</html>

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<style type="text/css">
	.menu{
		text-decoration:none;
	}
</style>
<script type="text/javascript">
	$(function(){
		$(".menu").click(function(){
			//获得超链接中的文本内容
			var textContent = this.innerHTML;
			//获得请求路径
			var url = this.href;
			//alert(url);
			//创建选项卡
			createTabs(textContent,url);
			//让超链接不跳转
			return false;
		});
	});
	function createTabs(textContent,url){
		//判断选项卡是否存在
		var flag = $("#data").tabs("exists",textContent);
		if(flag){
			//选项卡存在，选中
			$("#data").tabs("select",textContent);
		}else{
			//选项卡不存在，创建
			$("#data").tabs('add',{    
			    title:textContent,    
			    content:createUrl(url),    
			    closable:true   
			});  
		}
	}
	function createUrl(url){
		return "<iframe src='"+url+"' style='border:0px;width:100%;height:95%;'></iframe>";
	}
</script>
</head>
<body>
	<div id="cc" class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north',title:'管理系统',split:true" style="height: 150px;"></div>
		<div data-options="region:'west',title:'菜单栏',split:true" style="width: 200px;">
			<div id="aa" class="easyui-accordion" data-options="fit:true">
				<div title="客户管理" data-options="iconCls:'icon-save',selected:true" style="overflow: auto; padding: 10px;">
					<a href="customer.html" class="menu">客户管理</a>
				</div>
				<div title="联系人管理" data-options="iconCls:'icon-reload'" style="padding: 10px;">
					<a href="linkman.html" class="menu">联系人管理</a>
				</div>
				<div title="拜访记录管理" data-options="iconCls:'icon-reload'" style="padding: 10px;">
					<a href="#" class="menu">拜访记录管理</a>
				</div>
				<div title="统计分析" data-options="iconCls:'icon-reload'" style="padding: 10px;">
					<a href="#" class="menu">统计分析</a>
				</div>
				<div title="系统管理" data-options="iconCls:'icon-reload'">
					<a href="#" class="menu">系统管理</a>
				</div>
			</div>
		</div>
		<div data-options="region:'center'" style="padding: 5px; background: #eee;">
			<div id="data" class="easyui-tabs" data-options="fit:true">
				<div title="数据区域" style="padding: 20px; display: none;">
				欢迎来到CRM管理系统
				</div>
			</div>
		</div>
	</div>
</body>
</html>

菜鸟hyn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EasyUI

什么是EasyUI？jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。EasyUI的使用引入EasyUI的开发JS和CSSEasyUI的使用有两种方...
复制链接

扫一扫

专栏目录