390 lines
15 KiB
HTML
390 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>EasyUI 后台管理系统</title>
|
||
<!-- 引入必要资源 -->
|
||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.14/themes/default/easyui.css">
|
||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.14/themes/icon.css">
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.14/jquery.easyui.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.14/locale/easyui-lang-zh_CN.js"></script>
|
||
|
||
<style>
|
||
/* 全局样式调整 */
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: "Microsoft YaHei", sans-serif;
|
||
}
|
||
/* 顶部导航样式 */
|
||
.top-nav {
|
||
height: 60px;
|
||
background: #2d3748;
|
||
color: #fff;
|
||
line-height: 60px;
|
||
padding: 0 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.logo {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
.user-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: #4299e1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
}
|
||
/* 主容器布局 */
|
||
.main-container {
|
||
display: flex;
|
||
height: calc(100vh - 60px);
|
||
}
|
||
/* 左侧菜单样式 */
|
||
.left-menu {
|
||
width: 220px;
|
||
background: #374151;
|
||
color: #fff;
|
||
}
|
||
.easyui-tree {
|
||
background: transparent;
|
||
}
|
||
.easyui-tree li a {
|
||
color: #e5e7eb !important;
|
||
height: 40px !important;
|
||
line-height: 40px !important;
|
||
}
|
||
.easyui-tree li a:hover, .easyui-tree li.selected a {
|
||
background: #4b5563 !important;
|
||
color: #fff !important;
|
||
}
|
||
/* 内容区域样式 */
|
||
.content-area {
|
||
flex: 1;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
background: #f3f4f6;
|
||
}
|
||
.panel-header {
|
||
background: #4299e1 !important;
|
||
color: #fff !important;
|
||
}
|
||
/* 表单样式调整 */
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
.form-label {
|
||
display: inline-block;
|
||
width: 80px;
|
||
text-align: right;
|
||
margin-right: 10px;
|
||
}
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.left-menu {
|
||
width: 60px;
|
||
}
|
||
.logo span {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="easyui-layout">
|
||
<!-- 顶部导航 -->
|
||
<div class="top-nav">
|
||
<div class="logo">
|
||
<i class="icon-menu"></i>
|
||
<span>EasyUI 管理系统</span>
|
||
</div>
|
||
<div class="user-info">
|
||
<span>欢迎回来，管理员</span>
|
||
<div class="user-avatar">管</div>
|
||
<a href="javascript:;" class="easyui-linkbutton" plain="true" iconCls="icon-exit" onclick="logout()">退出登录</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主容器 -->
|
||
<div class="main-container">
|
||
<!-- 左侧菜单 -->
|
||
<div class="left-menu" id="menuTree"></div>
|
||
|
||
<!-- 右侧内容区域 -->
|
||
<div class="content-area">
|
||
<div class="easyui-panel" title="数据管理" style="padding: 20px;">
|
||
<!-- 工具栏 -->
|
||
<div style="margin-bottom: 15px;">
|
||
<a href="javascript:;" class="easyui-linkbutton" iconCls="icon-add" onclick="addData()">新增</a>
|
||
<a href="javascript:;" class="easyui-linkbutton" iconCls="icon-edit" onclick="editData()">编辑</a>
|
||
<a href="javascript:;" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteData()">删除</a>
|
||
<input class="easyui-searchbox" style="width: 300px; float: right;"
|
||
prompt="请输入关键词搜索" onsearch="searchData()">
|
||
</div>
|
||
|
||
<!-- 数据表格 -->
|
||
<table id="dataGrid" class="easyui-datagrid"
|
||
style="width:100%;height:calc(100vh - 220px);"
|
||
data-options="
|
||
singleSelect:true,
|
||
fitColumns:true,
|
||
pagination:true,
|
||
rownumbers:true,
|
||
pageSize:10,
|
||
pageList:[10,20,30],
|
||
url:'#',
|
||
method:'get'">
|
||
<thead>
|
||
<tr>
|
||
<th data-options="field:'id',width:50,align:'center'">ID</th>
|
||
<th data-options="field:'name',width:100">名称</th>
|
||
<th data-options="field:'category',width:80,align:'center'">分类</th>
|
||
<th data-options="field:'status',width:80,align:'center',formatter:statusFormatter">状态</th>
|
||
<th data-options="field:'createTime',width:150,align:'center'">创建时间</th>
|
||
<th data-options="field:'operate',width:120,align:'center',formatter:operateFormatter">操作</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增/编辑弹窗 -->
|
||
<div id="dataDialog" class="easyui-dialog" title="数据操作"
|
||
style="width:500px;height:350px;"
|
||
data-options="closed:true,modal:true,buttons:[
|
||
{text:'保存',iconCls:'icon-save',handler:saveData},
|
||
{text:'取消',iconCls:'icon-cancel',handler:function(){$('#dataDialog').dialog('close');}}
|
||
]">
|
||
<form id="dataForm" method="post">
|
||
<div class="form-group">
|
||
<label class="form-label">名称：</label>
|
||
<input class="easyui-textbox" name="name" style="width:350px;" required="true">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">分类：</label>
|
||
<select class="easyui-combobox" name="category" style="width:350px;" required="true">
|
||
<option value="分类1">分类1</option>
|
||
<option value="分类2">分类2</option>
|
||
<option value="分类3">分类3</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">状态：</label>
|
||
<select class="easyui-combobox" name="status" style="width:350px;" required="true">
|
||
<option value="1">启用</option>
|
||
<option value="0">禁用</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">备注：</label>
|
||
<textarea class="easyui-textbox" name="remark" style="width:350px;height:100px;" multiline="true"></textarea>
|
||
</div>
|
||
<input type="hidden" name="id">
|
||
</form>
|
||
</div>
|
||
|
||
<script>
|
||
// 页面加载完成后初始化
|
||
$(function() {
|
||
// 初始化左侧菜单树
|
||
initMenuTree();
|
||
|
||
// 加载表格数据
|
||
loadGridData();
|
||
});
|
||
|
||
// 初始化左侧菜单树
|
||
function initMenuTree() {
|
||
$('#menuTree').tree({
|
||
data: [
|
||
{
|
||
text: '系统管理',
|
||
iconCls: 'icon-sys',
|
||
children: [
|
||
{text: '用户管理', iconCls: 'icon-user', url: 'user.html'},
|
||
{text: '角色管理', iconCls: 'icon-role', url: 'role.html'},
|
||
{text: '权限管理', iconCls: 'icon-perm', url: 'perm.html'}
|
||
]
|
||
},
|
||
{
|
||
text: '数据管理',
|
||
iconCls: 'icon-data',
|
||
children: [
|
||
{text: '基础数据', iconCls: 'icon-base', url: 'base.html', selected: true},
|
||
{text: '日志管理', iconCls: 'icon-log', url: 'log.html'},
|
||
{text: '统计分析', iconCls: 'icon-stat', url: 'stat.html'}
|
||
]
|
||
},
|
||
{
|
||
text: '系统设置',
|
||
iconCls: 'icon-set',
|
||
children: [
|
||
{text: '基本设置', iconCls: 'icon-basic', url: 'setting.html'},
|
||
{text: '安全设置', iconCls: 'icon-safe', url: 'safe.html'}
|
||
]
|
||
}
|
||
],
|
||
lines: true,
|
||
onClick: function(node) {
|
||
// 菜单点击事件（实际项目中可用于加载对应页面）
|
||
console.log('点击菜单：', node.text, '，对应页面：', node.url);
|
||
// 这里可以通过AJAX加载页面内容到content-area
|
||
}
|
||
});
|
||
}
|
||
|
||
// 加载表格数据（模拟数据）
|
||
function loadGridData() {
|
||
// 模拟后端返回数据
|
||
var mockData = {
|
||
total: 30,
|
||
rows: [
|
||
{id: 1, name: '测试数据1', category: '分类1', status: 1, createTime: '2025-11-01 10:20:30'},
|
||
{id: 2, name: '测试数据2', category: '分类2', status: 1, createTime: '2025-11-02 14:30:15'},
|
||
{id: 3, name: '测试数据3', category: '分类3', status: 0, createTime: '2025-11-03 09:15:22'},
|
||
{id: 4, name: '测试数据4', category: '分类1', status: 1, createTime: '2025-11-04 16:40:55'},
|
||
{id: 5, name: '测试数据5', category: '分类2', status: 0, createTime: '2025-11-05 11:25:33'}
|
||
]
|
||
};
|
||
|
||
$('#dataGrid').datagrid('loadData', mockData);
|
||
}
|
||
|
||
// 状态格式化函数
|
||
function statusFormatter(value) {
|
||
return value === 1 ? '<span style="color:green;">启用</span>' : '<span style="color:red;">禁用</span>';
|
||
}
|
||
|
||
// 操作列格式化函数
|
||
function operateFormatter(value, row) {
|
||
return `
|
||
<a href="javascript:;" class="easyui-linkbutton" plain="true" iconCls="icon-edit" onclick="editData(${row.id})">编辑</a>
|
||
<a href="javascript:;" class="easyui-linkbutton" plain="true" iconCls="icon-remove" onclick="deleteData(${row.id})">删除</a>
|
||
`;
|
||
}
|
||
|
||
// 新增数据
|
||
function addData() {
|
||
$('#dataForm').form('clear');
|
||
$('#dataDialog').dialog('setTitle', '新增数据').dialog('open');
|
||
}
|
||
|
||
// 编辑数据
|
||
function editData(id) {
|
||
// 如果传入id，直接根据id获取数据；否则获取选中行
|
||
var row = id
|
||
? $('#dataGrid').datagrid('findRow', id)
|
||
: $('#dataGrid').datagrid('getSelected');
|
||
|
||
if (!row) {
|
||
$.messager.alert('提示', '请选择要编辑的数据！', 'info');
|
||
return;
|
||
}
|
||
|
||
// 填充表单数据
|
||
$('#dataForm').form('load', row);
|
||
$('#dataDialog').dialog('setTitle', '编辑数据').dialog('open');
|
||
}
|
||
|
||
// 删除数据
|
||
function deleteData(id) {
|
||
var row = id
|
||
? $('#dataGrid').datagrid('findRow', id)
|
||
: $('#dataGrid').datagrid('getSelected');
|
||
|
||
if (!row) {
|
||
$.messager.alert('提示', '请选择要删除的数据！', 'info');
|
||
return;
|
||
}
|
||
|
||
$.messager.confirm('确认', '确定要删除【' + row.name + '】吗？', function(r) {
|
||
if (r) {
|
||
// 模拟删除操作
|
||
$('#dataGrid').datagrid('deleteRow', $('#dataGrid').datagrid('getRowIndex', row));
|
||
$.messager.show({title: '成功', msg: '数据删除成功！'});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 保存数据
|
||
function saveData() {
|
||
$('#dataForm').form('submit', {
|
||
url: '#', // 实际项目中替换为后端接口
|
||
onSubmit: function() {
|
||
return $(this).form('validate'); // 表单验证
|
||
},
|
||
success: function() {
|
||
var id = $('input[name="id"]').val();
|
||
var data = $('#dataForm').form('getData');
|
||
|
||
if (id) {
|
||
// 编辑操作：更新表格数据
|
||
var rowIndex = $('#dataGrid').datagrid('getRowIndex', $('#dataGrid').datagrid('findRow', id));
|
||
$('#dataGrid').datagrid('updateRow', {
|
||
index: rowIndex,
|
||
row: data
|
||
});
|
||
} else {
|
||
// 新增操作：添加到表格
|
||
data.id = Math.floor(Math.random() * 1000); // 模拟生成ID
|
||
data.createTime = new Date().format('yyyy-MM-dd hh:mm:ss');
|
||
$('#dataGrid').datagrid('insertRow', {
|
||
index: 0,
|
||
row: data
|
||
});
|
||
}
|
||
|
||
$('#dataDialog').dialog('close');
|
||
$.messager.show({title: '成功', msg: '数据保存成功！'});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 搜索数据
|
||
function searchData(value) {
|
||
$('#dataGrid').datagrid('load', {
|
||
keyword: value // 实际项目中传递关键词到后端查询
|
||
});
|
||
}
|
||
|
||
// 退出登录
|
||
function logout() {
|
||
$.messager.confirm('确认', '确定要退出登录吗？', function(r) {
|
||
if (r) {
|
||
window.location.href = 'login.html'; // 跳转到登录页
|
||
}
|
||
});
|
||
}
|
||
|
||
// 日期格式化扩展
|
||
Date.prototype.format = function(fmt) {
|
||
var o = {
|
||
"M+": this.getMonth() + 1,
|
||
"d+": this.getDate(),
|
||
"h+": this.getHours(),
|
||
"m+": this.getMinutes(),
|
||
"s+": this.getSeconds(),
|
||
"q+": Math.floor((this.getMonth() + 3) / 3),
|
||
"S": this.getMilliseconds()
|
||
};
|
||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||
for (var k in o)
|
||
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||
return fmt;
|
||
};
|
||
</script>
|
||
</body>
|
||
</html> |