资料准备
- 资料下载地址为：https://wws.lanzous.com/i9Q9Mgi22zi
- 创建一个普通的纯 HTML 项目引入 EasyUI 上面我给出了下载地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT6666权限管理系统</title>
<link rel="stylesheet" type="text/css" href="./uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="./uimaker/icon.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.easyui.min.js"></script>
<script type="text/javascript" src="./easyui-lang-zh_CN.js"></script>
</head>
<body>
</body>
</html>
Layout布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT6666权限管理系统</title>
<link rel="stylesheet" type="text/css" href="./uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="./uimaker/icon.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.easyui.min.js"></script>
<script type="text/javascript" src="./easyui-lang-zh_CN.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height:100px;background: #ec4e00;padding: 20px 20px">
<img src="main_logo.png"/>
</div>
<div data-options="region:'south'" style="height:50px;padding-top: 15px;border-bottom: 3px solid #ec4e00;">
<p align="center" font-size="14px">Copyright (c) 2020-2030 IT6666.Co.Ltd. All Rights Reserved.</p>
</div>
<div data-options="region:'west',split:true" style="width:300px;">
<div id="aa" class="easyui-accordion" data-options="fit:true">
<div title="菜单" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">
<ul id="tree"></ul>
</div>
<div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
</div>
<div data-options="region:'center'" style="padding:5px;background:#eee;">
<div id="tabs">
</div>
</div>
<script>
$(function () {
$('#tree').tree({
url: 'tree.json',
lines: true,
onClick: function (node) {
// 在添加标签之前，做判断，判断这个标签是否存在
let exists = $('#tabs').tabs('exists', node.text);
if (exists) {
// 存在就选中
$('#tabs').tabs('select', node.text);
} else {
// 不存在就添加
$("#tabs").tabs("add", {
title: node.text,
closable: true,
content: `<iframe src=${node.attributes.url} width="100%" height="100%" frameborder="0"></iframe>`
});
}
}
});
$('#tabs').tabs({
fit: true
});
});
</script>
</body>
</html>
动态添加标签页
...
<div data-options="region:'west',split:true" style="width:300px;">
<div id="aa" class="easyui-accordion" data-options="fit:true">
<div title="菜单" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">
<ul id="tree"></ul>
</div>
<div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
</div>
<div data-options="region:'center'" style="padding:5px;background:#eee;">
<div id="tabs">
</div>
</div>
<script>
$(function () {
$('#tree').tree({
url: 'tree.json',
lines: true,
onClick: function (node) {
// 在添加标签之前，做判断，判断这个标签是否存在
let exists = $('#tabs').tabs('exists', node.text);
if (exists) {
// 存在就选中
$('#tabs').tabs('select', node.text);
} else {
// 不存在就添加
$("#tabs").tabs("add", {
title: node.text,
closable: true,
content: `<iframe src=${node.attributes.url} width="100%" height="100%" frameborder="0"></iframe>`
});
}
}
});
$('#tabs').tabs({
fit: true
});
});
</script>
...
Tabs页面引入
修改 index.html
...
<script>
$(function () {
$('#tree').tree({
url: 'tree.json',
lines: true,
onClick: function (node) {
// 在添加标签之前，做判断，判断这个标签是否存在
let exists = $('#tabs').tabs('exists', node.text);
if (exists) {
// 存在就选中
$('#tabs').tabs('select', node.text);
} else {
// 不存在就添加
$("#tabs").tabs("add", {
title: node.text,
closable: true,
// 重点是这里
content: `<iframe src=${node.attributes.url} width="100%" height="100%" frameborder="0"></iframe>`
});
}
}
});
$('#tabs').tabs({
fit: true
});
});
</script>
...
新建 department.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
部门
</body>
</html>
新建 employee.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工管理</title>
</head>
<body>
员工管理
</body>
</html>
修改员工页面 employee.html 添加数据表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工管理</title>
<link rel="stylesheet" type="text/css" href="./uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="./uimaker/icon.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.easyui.min.js"></script>
<script type="text/javascript" src="./easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="dg"></table>
<script>
$(function () {
$('#dg').datagrid({
url: 'datagrid_data.json',
columns: [[
{field: 'name', title: '姓名', width: 80, align: 'center'},
{field: 'date', title: '入职日期', width: 80, align: 'center'},
{field: 'email', title: '邮件', width: 80, align: 'center'},
{
field: 'department',
title: '部门',
width: 100,
align: 'center',
formatter: function (value, row, index) {
if (row.department.name) {
return row.department.name;
}
}
},
{
field: 'state', title: '状态', width: 100, align: 'center', formatter: function (value, row, index) {
if (row.state) {
return '在职';
} else {
return `<font color="red">离职</font>`;
}
}
}
]],
fit: true,
fitColumns: true,
// 显示行号
rownumbers: true,
});
});
</script>
</body>
</html>
添加表格工具栏，toolbar
...
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true">刷新</a>
</div>
...
<script>
$(function () {
$('#dg').datagrid({
url: 'datagrid_data.json',
columns: [[
{field: 'name', title: '姓名', width: 80, align: 'center'},
{field: 'date', title: '入职日期', width: 80, align: 'center'},
{field: 'email', title: '邮件', width: 80, align: 'center'},
{
field: 'department',
title: '部门',
width: 100,
align: 'center',
formatter: function (value, row, index) {
if (row.department.name) {
return row.department.name;
}
}
},
{
field: 'state', title: '状态', width: 100, align: 'center', formatter: function (value, row, index) {
if (row.state) {
return '在职';
} else {
return `<font color="red">离职</font>`;
}
}
}
]],
fit: true,
fitColumns: true,
// 显示行号
rownumbers: true,
toolbar: '#tb'
});
});
</script>
</body>
</html>
点击添加按钮 弹出 Dialog
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="add">添加</a>
</div>
<div id="dialog">
<table align="center" style="margin-top: 10px;">
<tr>
<td>姓名：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>入职日期：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>部门：</td>
<td align="left"><select id="department"></select></td>
</tr>
<tr>
<td>状态：</td>
<td align="left"><select></select></td>
</tr>
</table>
</div>
<script>
$(function () {
$("#add").click(function () {
$('#dialog').dialog({
width: 300,
height: 250,
buttons: [{
text: '保存',
iconCls: 'icon-save',
handler: function () {
alert('保存');
}
}, {
text: '关闭',
iconCls: 'icon-cancel',
handler: function () {
$('#dialog').dialog('close');
}
}]
});
});
});
</script>
加入表单校验
...
<tr>
<td>姓名：</td>
<td><input type="text" class="easyui-validatebox" data-options="required:true"/></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" class="easyui-validatebox" data-options="required:true,validType:'email'"/></td>
</tr>
...
处理部门和状态的下拉框
...
<tr>
<td>部门：</td>
<td align="left"><select id="department"></select></td>
</tr>
<tr>
<td>状态：</td>
<td align="left"><select id="state"></select></td>
</tr>
$('#state').combobox({
width: 160,
panelHeight: 'auto',
valueField: 'value',
textField: 'label',
data: [{
label: '在职',
value: 'true',
}, {
label: '离职',
value: 'false',
}]
});
$('#state').combobox("select", "在职");
$('#department').combobox({
url: 'department.json',
valueField: 'id',
textField: 'name',
width: 160,
panelHeight: 'auto'
});
$('#department').combobox("select", "财务部");
...
日期框的处理
...
<tr>
<td>入职日期：</td>
<td><input type="text" class="easyui-datebox" required="required"/></td>
</tr>
...
表单提交
...
<form id="myForm">
<table align="center" style="margin-top: 10px;">
<tr>
<td>姓名：</td>
<td><input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></td>
</tr>
<tr>
<td>入职日期：</td>
<td><input type="text" name="date" class="easyui-datebox" required="required"/></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email" class="easyui-validatebox"
data-options="required:true,validType:'email'"/></td>
</tr>
<tr>
<td>部门：</td>
<td align="left"><select name="department.id" id="department"></select></td>
</tr>
<tr>
<td>状态：</td>
<td align="left"><select name="state" id="state"></select></td>
</tr>
</table>
</form>
$("#add").click(function () {
$('#dialog').dialog({
width: 300,
height: 250,
title: '添加员工',
buttons: [{
text: '保存',
iconCls: 'icon-save',
handler: function () {
// 提交表单
$('#myForm').form('submit', {
url: 'save.json',
success: function (data) {
data = $.parseJSON(data);
if (data.success) {
$.messager.alert('温馨提示', data.msg);
// 表格重载
$('#dg').datagrid('reload');
// 关闭对话框
$('#dialog').dialog('close');
// 重置表单数据
} else {
$.messager.alert('温馨提示', data.msg);
}
}
});
}
}, {
text: '关闭',
iconCls: 'icon-cancel',
handler: function () {
$('#dialog').dialog('close');
}
}]
});
});
...
编辑员工处理，必须要选中一行数据进行修改，不允许多选，然后就是公用同一个Dialog
禁止表格数据多选
$('#dg').datagrid({
// 不允许多选
singleSelect: true
});
编辑判断是否选中了数据
$('#edit').click(function () {
//判断是否选中了数据
let rowData = $("#dg").datagrid("getSelected");
if (!rowData) {
$.messager.alert("温馨提示", "请选中一条数据进行编辑");
}
});
把Dialog 抽取公用
$('#dialog').dialog({
width: 300,
height: 250,
title: '添加员工',
buttons: [{
text: '保存',
iconCls: 'icon-save',
handler: function () {
// 提交表单
$('#myForm').form('submit', {
url: 'save.json',
success: function (data) {
data = $.parseJSON(data);
if (data.success) {
$.messager.alert('温馨提示', data.msg);
// 表格重载
$('#dg').datagrid('reload');
// 关闭对话框
$('#dialog').dialog('close');
// 重置表单数据
} else {
$.messager.alert('温馨提示', data.msg);
}
}
});
}
}, {
text: '关闭',
iconCls: 'icon-cancel',
handler: function () {
$('#dialog').dialog('close');
}
}],
closed: true
});
去掉默认选择
$('#state').combobox("select", "在职");
$('#department').combobox("select", "财务部");
改造添加回调
$("#add").click(function () {
$('#dialog').dialog('open');
});
我把改造了的地方贴出来，后面在解释
...
<div id="dialog">
<form id="myForm">
<input name="id" hidden="hidden"/>
</form>
</div>
$('#dialog').dialog({
width: 300,
height: 250,
buttons: [{
text: '保存',
iconCls: 'icon-save',
handler: function () {
// ID有值就是编辑没有就是添加
let id = $("[name = 'id']").val();
let url;
if (id) {
url = "update.json";
} else {
url = "save.json";
}
// 提交表单
$('#myForm').form('submit', {
url: url,
success: function (data) {
data = $.parseJSON(data);
if (data.success) {
$.messager.alert('温馨提示', data.msg);
// 表格重载
$('#dg').datagrid('reload');
// 关闭对话框
$('#dialog').dialog('close');
// 重置表单数据
} else {
$.messager.alert('温馨提示', data.msg);
}
}
});
}
}, {
text: '关闭',
iconCls: 'icon-cancel',
handler: function () {
$('#dialog').dialog('close');
}
}],
closed: true
});
$("#add").click(function () {
// 清空表单
$("#myForm").form("clear");
$('#dialog').dialog('setTitle', '添加员工');
$('#dialog').dialog('open');
});
$('#edit').click(function () {
//判断是否选中了数据
let rowData = $("#dg").datagrid("getSelected");
if (!rowData) {
$.messager.alert("温馨提示", "请选中一条数据进行编辑");
return;
}
// 清空表单
$("#myForm").form("clear");
$('#dialog').dialog('setTitle', '添加员工');
// 弹出对话框
$('#dialog').dialog('open');
rowData["department.id"] = rowData["department"].id;
rowData["state"] = rowData["state"] + "";
// 数据回显，同名匹配
$("#myForm").form("load", rowData);
});
...
- 添加了一个隐藏域，用于区分添加还是编辑
- 点击编辑数据回显，回显之前先清空表单数据
- 点击添加按钮数据先清空
