Easy-UI是封装了前台逻辑以及显示的基于Jquery技术的前端框架.
Easy-UI特点
- EasyUI支持两种渲染方式分别为javascript方式（如：$(‘#p’).panel({…})）和html标记方式（如：class=”easyui-panel”）
- 支持HTML5（通过data-options属性）
Easy-UI常用组件
- Base
- Layout
- Menu and Button
- Form
- Window
- DataGrid and Tree
- Extension
语法
属性
所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，对话框属性定义在jQuery.fn.dialog.defaults里面。
事件
所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。
方法
调用方法的语法：$(‘selector’).plugin(‘method’, parameter);
解释：
selector 是jQery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。
开发步骤
下载程序库并导入EasyUI的CSS和Javascript文件
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>通过标记或Javascript定义EasyUI组件
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="My Panel" iconCls="icon-save" collapsible="true"> The panel content </div>
入门案例
首页jsp
<%@ 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>客户关系管理系统</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
});
function addTab(title,url){
//判断窗口是否已经打开,打开了就不再打开
if ($('#tt').tabs('exists',title)){
//已经打开不再打开
$('#tt').tabs('select',title)
return ;
}
$('#tt').tabs('add',{
title:title,
content:"<iframe src='"+url+"' style='width:100%;height:100%' />",
closable:true,
});
}
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:75px;background:#B3DFDA;padding:10px"><h1>客户关系管理系统</h1></div>
<div region="west" split="true" title="菜单" style="width:150px;">
<div id="aa" class="easyui-accordion" fit="true">
<div title="用户管理" iconCls="icon-pencil" style="overflow:auto;padding:10px;">
<a href="javascript:void(0)" onclick="addTab('用户列表','${pageContext.request.contextPath}/list.jsp')">用户列表</a>
</div>
<div title="客户管理" iconCls="icon-pencil" selected="true" collapsed="true">
<a href="javascript:void(0)" >客户列表</a>
</div>
<div title="联系人管理" iconCls="icon-pencil" style="padding:10px;">
<a href="javascript:void(0)" >联系人列表</a>
</div>
</div>
</div>
<div region="center" >
<div id="tt" class="easyui-tabs" tools="#tab-tools" fit="true">
<div title="主界面" tools="#p-tools" style="padding:20px;" >
<h2><font color="gray">欢迎您登陆!</font></h2>
</div>
</div>
</div>
</body>
</html>
用户列表jsp（crud）
<%@ 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>用户列表</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$('#test').datagrid({
singleSelect:true,
title:'用户列表',
iconCls:'icon-save',
nowrap: false,
striped: true,
collapsible:false,
url:'${pageContext.request.contextPath}/UserAction_list',//加载表格后台数据
sortName: 'id',//指定排序列
sortOrder: 'asc',//升序
remoteSort: false,
idField:'id',
frozenColumns:[[ //配置冻结列
{field:'ck',checkbox:true}, //准备多选框列
{title:'id',field:'user_id',width:80,sortable:true}//主键列
]],
columns:[[
{field:'user_code',title:'登陆名',width:120},
{field:'user_name',title:'昵称',width:220,rowspan:2,sortable:false,},
]],
pagination:true,//是否分页
rownumbers:true,//是否显示行号
toolbar:[{
id:'btnadd',
text:'添加用户',
iconCls:'icon-add',
handler:function(){
//清空表单
$('#ff').form('clear');
open1();
}
},{
id:'btncut',
text:'修改用户',
iconCls:'icon-pencil',
handler:function(){
//获得被选中的行并回显数据
getSelected();
}
},{
id:'btnsave',
text:'删除用户',
iconCls:'icon-cancel',
handler:function(){
//获得被选中的行
var selected = $('#test').datagrid('getSelected');
//未获得,提示
if (!selected){
alert("请选择一行再操作!");
return;
}else {
alert("请选中一行!");
}
//发送ajax请求访问后台删除用户
//成功,刷新表单
$.post("${pageContext.request.contextPath}/UserAction_list",
{ user_id: selected.user_id },
function(data){
alert("操作成功!");
});
//刷新表单
$('#test').datagrid('reload');
}
}]
});
var p = $('#test').datagrid('getPager');
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
});
function resize(){
$('#w').window({
title: 'New Title',
width: 600,
modal: true,
shadow: false,
closed: false,
height: 300
});
}
function open1(){
$('#w').window('open');
}
function close1(){
$('#w').window('close');
}
//指定表单是ajax提交
$('#ff').form({
url:'${pageContext.request.contextPath}/UserAction_regist',
onSubmit:function(){return true},
success: function(data){
alert(data);
//清空表单数据
$('#w').window('clear');
//关闭窗口
close1();
//刷新列表
$('#test').datagrid('reload');
}
});
//提交表单
function submitForm() {
$('#ff').submit();
}
//获得被选中的行
function getSelected(){
var selected = $('#test').datagrid('getSelected');
if (selected){//如果选中
// alert(selected.user_id+":"+selected.user_name+":"+selected.user_code);
//回显数据
$('#ff').form('load',{
user_id:selected.user_id,
user_name:selected.user_name,
user_code:selected.user_code,
});
//显示窗口
open1();
}else {
alert("请选中一行!");
}
}
</script>
</head>
<body>
<table id="test" ></table>
<div id="w" class="easyui-window" title="操作" closed="true" iconCls="icon-save" style="width:500px;height:200px;padding:5px;">
<form id="ff" method="post" novalidate>
<div>
<label for="user_code">登录名:</label>
<input class="easyui-validatebox" type="text" name="user_code" required="true"></input>
</div>
<div>
<label for="user_name">昵 称:</label>
<input class="easyui-validatebox" type="text" name="user_name" required="true"></input>
</div>
<div>
<label for="user_password">密 码:</label>
<input class="easyui-validatebox" type="text" name="user_password" required="true"></input>
</div>
<div>
<input type="button" onclick="submitForm()" value="提交" >
</div>
</form>
</div>
</body>
</html>
案例总结
首页
- layout
- 案例用了北，西，中间面板搭建整体框架。具体使用查API
- 布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。
- accodion
1.案例用来做菜单栏使用，使用ajax方式跳转链接
2.分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的’href’属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。
- tabs
1.案例中用tabs搭建主界面，点击菜单时，跳转至主界面，相同的链接，只跳转一次。
2.选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
用户列表
- datagride
1.用于展示用户列表
2.DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
添加用户
- window
1.在用户列表中点击添加时，弹出窗口。
2.窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。
- form
1.用于显示添加客户的内容
2.form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
3.使普通表单成为ajax提交方式的表单。
$('#ff').form({
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
// submit the form
$('#ff').submit();
修改用户
- 表格改为单选
在datagrid中找到checkbox，singleSelect属性改为true
获得选中行
调用datagrid中的getSelected方法 返回第一个被选中的行或如果没有选中的行则返回null。
回显要修改的数据
from中找到 load方法
方法描述：读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录。
删除用户
- 获得选中行
调用datagrid中的getSelected方法 返回第一个被选中的行或如果没有选中的行则返回null。
发送ajax请求删除客户
删除后，刷新列表
调用datagrid中的reload方法。等同于’load’方法，但是它将保持在当前页。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
