什么是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>