EasyUI 的简介
easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模
Demo:
home.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/demo.css">
<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>
<style type="text/css">
.topNav
{
position:absolute;right:8px;top:12px;
font-size:12px;
}
.topNav a
{
text-decoration:none;
font-weight:normal;
font-size:12px;
margin-left:3px;
margin-right:3px;
color:#333;
}
.topNav a:hover
{
text-decoration:underline;
}
#tt a{
text-decoration:none;
color:#000;
}
</style>
</head>
<body class="easyui-layout">
<!-- 顶部 Logo -->
<div data-options="region:'north',border:true,split:true"
style="height: 100px;background: url(img/logo.png) no-repeat 0% 50%; ">
<div class="topNav" style="border: 0px red solid; width: 300px; height: 80px; line-height:80px; float: right;">
<a href="#">首页</a> |
<a href="#"> 在线示例 </a>|
<a href="#">Api手册</a> |
<a href="#">开发教程</a> |
<a href="#"> 快速入门 </a>
</div>
</div>
<!-- 右侧 菜单栏 -->
<div data-options="region:'west',title:'导航栏',split:true"
style="width: 180px;">
<ul id="tt" class="easyui-tree">
<li>
<span>系统管理</span>
<ul>
<li>
<a href="javascript:void(0)" "goTabs()"><span>用户管理</span></a>
</li>
<li><span>菜单管理</span></li>
<li><span>角色管理</span></li>
</ul>
</li>
<li>
<span>系统管理</span>
<ul>
<li>
<span>用户管理</span>
</li>
<li><span>菜单管理</span></li>
<li><span>角色管理</span></li>
</ul>
</li>
</ul>
</div>
<!-- 中间 内容主体 -->
<div data-options="region:'center',border:false"
style="padding: 0px; background: #eee;">
<div id="tabs" class="easyui-tabs" data-options="fit:true" style="width:500px;height:250px;">
<div title="首页" style="padding:20px;display:none;">
欢迎光临
</div>
</div>
</div>
<script type="text/javascript">
function goTabs(){
// 动态添加一个标签页
// 添加一个新的标签页面板（tab panel）
$('#tabs').tabs('add',{
title:'用户管理',
content:'<iframe src="user.jsp" width="100%" height="100%" style="border: 0px;"></iframe>',
closable:true
});
}
</script>
</body>
</html>
Demo:
login.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/demo.css">
<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>
</head>
<body >
<div align="center" style="margin-top: 200px;">
<div class="easyui-panel" title="用户登录" style="width:400px;max-width:400px;padding:30px 60px;">
<form id="ff" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="username" style="width:100%" data-options="label:'账号:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="password" style="width:100%" data-options="label:'密码:',required:true">
</div>
</form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" "submitForm()" style="width:80px">登录</a>
<a href="javascript:void(0)" class="easyui-linkbutton" "clearForm()" style="width:80px">清空</a>
</div>
</div>
</div>
<script>
function submitForm(){
$('#ff').form('submit', {
url:"loginServlet",
success:function(data){
if(data==0){
// 表示登录成功,跳转到home页面
location.href="home.jsp";
}else{
// 表示登录失败，给出错误提示
$.messager.alert('登录失败','账号或者密码错误:'+data);
}
}
});
}
function clearForm(){
$('#ff').form('clear');
}
</script>
</body>
</html>
Demo：
user.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/demo.css">
<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">
$(function(){
$('#dg').datagrid({
//url:'datagrid-data.json',
url:'userServlet',
fit:true,
striped:true,
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar: '#tb',
rowStyler: function(index,row){
if (row.unitcost>80){
return 'background-color:#6293BB;color:#fff;'; // return inline style
// the function can return predefined css class and inline style
// return {class:'r1', style:{'color:#fff'}};
}
},
columns:[[
{checkbox:true,field:''},
{field:'id',title:'编号',width:100},
{field:'username',title:'账号',width:100,editor:'textbox'},
{field:'password',title:'密码',width:100,editor:'textbox'},
{field:'age',title:'年龄',width:100,editor:'numberbox'},
{field:'address',title:'地址',width:100,editor:'textbox'}
]]
});
$('#dg').datagrid({
onDblClickRow:function(rowIndex, rowData){
//alert(rowIndex+" "+rowData.username)
// $("#dg").datagrid("beginEdit",rowIndex);
}
});
// 页面加载完成后关闭窗口
$("#win").window("close");
});
var index = -1;
// 进入编辑状态
function goUpdate(){
// 获取选中的行 getSelected
var row = $("#dg").datagrid("getSelected");
if(row != null){
// 将index对应的行关闭编辑状态
$("#dg").datagrid("endEdit",index);
// 获取row对应的index
index = $("#dg").datagrid("getRowIndex",row);
// 进入编辑状态
$("#dg").datagrid("beginEdit",index);
}else{
$.messager.alert('操作错误','请勾选要修改的行记录');
}
}
// 保存修改的数据
function saveUpdate(){
// 获取选中的行 getSelected
var row = $("#dg").datagrid("getSelected");
if(row != null){
// 获取row对应的index
index = $("#dg").datagrid("getRowIndex",row);
// 结束编辑状态
$("#dg").datagrid("endEdit",index);
// 将修改的数据提交到服务器修改数据库中的数据
console.log(row);
$.get("userServlet?task=update"
,{"id":row.id
,"username":row.username
,"password":row.password
,"age":row.age
,"address":row.address}
,function(msg){
//alert(msg);
// 刷新页面
$("#dg").datagrid("reload");
}
);
}else{
$.messager.alert('操作错误','请勾选要修改的行记录');
}
}
function deleteUser(){
// 获取选中的行 getSelected
var row = $("#dg").datagrid("getSelected");
if(row != null){
$.messager.confirm('确认框','你要确定删除这条记录?',function(r){
if (r){
$.get("userServlet?task=delete",{"id":row.id},function(msg){
// 刷新页面
$("#dg").datagrid("reload");
});
}
});
}else{
$.messager.alert('操作错误','请勾选要删除的行记录');
}
}
function openWindow(){
$("#win").window("open");
}
function submitForm(){
$('#ff').form('submit', {
url:"userServlet?task=add",
success:function(data){
// 清空表单
$('#ff').form('clear');
// 关闭窗口
$("#win").window("close");
// 刷新页面
$("#dg").datagrid("reload");
}
});
}
function clearForm(){
$('#ff').form('clear');
}
function qq(value,name){
alert(value+":"+name)
}
</script>
</head>
<body style="border: 0px;">
<div id="tb">
<a href="javascript:void(0)" class="easyui-linkbutton" "openWindow()"
data-options="iconCls:'icon-add',plain:true">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" "goUpdate()"
data-options="iconCls:'icon-edit',plain:true">修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" "saveUpdate()"
data-options="iconCls:'icon-save',plain:true">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" "deleteUser()"
data-options="iconCls:'icon-remove',plain:true">删除</a>
<input id="ss" class="easyui-searchbox" style="width:300px;height: 26px;"
data-options="searcher:qq,prompt:'Please Input Value'"></input>
</div>
<table id="dg"></table>
<div id="win" class="easyui-window" title="添加用户"
style="width:450px;height:360px;text-align: center;"
data-options="iconCls:'icon-save',modal:true,minimizable:false,maximizable:false">
<div style="width:400px; padding-top: 30px;padding-left: 30px;">
<form id="ff" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="username"
style="width:100%" data-options="label:'账号:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="password"
style="width:100%" data-options="label:'密码:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="age"
style="width:100%" data-options="label:'年龄:'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="address"
style="width:100%" data-options="label:'地址:'">
</div>
</form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" "submitForm()" style="width:80px">添加用户</a>
<a href="javascript:void(0)" class="easyui-linkbutton" "clearForm()" style="width:80px">清空</a>
</div>
</div>
</div>
</body>
</html>