Java笔记：EasyUI综合练习实现思路

最新推荐文章于 2025-01-16 22:34:03 发布

Java_gleaner

最新推荐文章于 2025-01-16 22:34:03 发布

阅读量221

点赞数 1

文章标签： java jQuery easyui

本文链接：https://blog.youkuaiyun.com/Java_gleaner/article/details/96728028

版权

这篇博客介绍了如何使用EasyUI构建一个后台管理系统，包括布局、加载树菜单、员工管理功能如列表显示、添加、保存、删除、修改、搜索等，并涉及到数据验证和自定义事件绑定。虽然未涉及后台及数据库连接，但详细阐述了每个步骤的关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用EasyUI制作一个后台管理系统，未连接后台及数据库。

1.布局

<body class="easyui-layout">
	    <div data-options="region:'north',split:true" style="height:150px; background:url(img/timg.jpg);">
	        <div style="font-size:40px;margin-top: 30px;margin-left: 15px;float:left">员工管理系统</div>
	        <div style="float:right;margin-right: 20px;margin-top: 10px;font-size: 15px;">欢迎XXX&emsp;<a href="#">注销</a> </div>
	    </div>
	    <div data-options="region:'south',split:true" style="height:100px;">
	        版权信息等内容
	    </div> 
	    <div id="treeID" data-options="region:'west',title:'菜单信息',split:true" style="width:230px;">
	    </div>
	    <div id="tabsID" class="easyui-tabs" data-options="region:'center'" style="padding:5px;background:#eee;">
	    </div>
	</body>

2.加载树菜单及添加选项卡

注意：点击菜单在选项卡添加页签时，应判断选项卡中是否存在此页签。

$(function(){
	//加载树菜单
	$("#treeID").tree({
		url:'json/tree.json',
		method:'get',
		onClick:function(node){
			if(node.url){
				//如果选项卡中有该页签就创建，而是跳转到该页签
				if(!$("#tabsID").tabs('exists',node.text)){
					//点击tree菜单，创建对应的选项卡页签
					$("#tabsID").tabs('add',{
					title:node.text,
					closable:true,
					content:"<iframe frameborder=0 style='width:100%;height:100%' src='"+node.url+"'></iframe>"
					})
				}else{
					$("#tabsID").tabs('select',node.text)
				}
			}
			
		}
	})
})

3. 员工管理

1. 列表显示

使用easyui-datagrid组件，展示员工列表

<table id="employee-grid" class="easyui-datagrid"  data-options="rownumbers:true,toolbar:'#tb',fit:true,singleSelect:true,collapsible:true,fitColumns:true,url:'json/employee.json',method:'get',pagination:true">
    <thead>
	    <tr>
	        <th data-options="field:'username',width:80">用户名</th>
	        <th data-options="field:'email',width:80">邮箱</th>
	        <th data-options="field:'age',width:80,align:'right'">年龄</th>
	        <th data-options="field:'headImage',width:80,align:'right'" formatter='headImgFormatter'>头像</th>
	        <th data-options="field:'department',width:80" formatter='deptFormatter'>部门</th>
	    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

员工JSON数据

{"id": 1,
"username": "admin",
"password": "48d05cc43f3bfe2510394e8dfcef919a",
"email": "admin@itsource.com",
"age": 34,
"headImage": "img/1.jpg",
"department": {
	"id": 1,
	"name": "IT部"}}

注意事项：
1、数据中部门是一个对象，无法直接展示，自定义一个属性formatter=‘headImgFormatter’

function deptFormatter(obj){
	return obj.name
}

2、处理没有部门的情况，可以在部门列表中设置一个名称为无的部门，也可以在自定义的deptFormatter函数中做判断，如果接受到值return部门名称，else返回一个字符串。
3、处理头像显示问题，自定义一个属性formatter=‘deptFormatter’

function headImgFormatter(imgUrl){
	if(imgUrl){
		return "<img src="+imgUrl+" style='height:50px;width:50px'></img>"
	}else{
		return "该员工没有设置头像"
	}
}

4. 统一绑定事件

需要统一绑定事件的都是a标签，在标签中自定义属性data-method

$(function(){
	$("a").on("click",function(){
		var methodName = $(this).data('method');
		//如果有方法名，调用方法
		if(methodName){
			methods[methodName]()
		}
	})
	//把方法封装成对象
	var methods = {
		add:function(){},
		edit:function(){},
		remove:function(){},
		search:function(){},
		...
	}
})

5.添加（add）

清空表单数据
显示密码框
开启密码验证
弹出添加表单

add:function(){
	$('#operateForm').form('clear');
	$("tr[pwd=true]").show();
	$("tr[pwd=true] input").validatebox('enableValidation');
	$("#formDlg").dialog('open');
},

6.保存（save）

提交数据
验证数据是否都通过了验证
将数据转换成JSON格式
跳转回列表
关闭表单

save:function(){
	$("#operateForm").form("submit",{
		url:'json/save.json',
		onSubmit:function(){
			return $(this).form("validate");
		},
		success:function(data){
			var result = $.parseJSON(data);
			if(result.success){
				$.messager.alert("温馨提示","添加成功","info");
				$("#employee-grid").datagrid("reload");
				$("#formDlg").dialog('close');
			}else{
				$.messager.alert("温馨提示","添加添加失败","info");
			}
		}
	})
},

7.删除（remove）

判断是否选择一行，点击删除
发送请求删除数据，提示是否确认删除
重新加载列表

remove:function(){
	// 获取选择的行,设置了singleSelect:true，只可以选择一行
	var selected = $("#employee-grid").datagrid("getSelected")
	if(selected==null){
		$.messager.alert("温馨提示","请选择一行需要修改的数据","info")
	}else{
		//提示选择是否确定删除
		$.messager.confirm('温馨提示:','你确定删除吗？',function(r){
			//如果点击确定，就传递id发送请求删除,并接收响应的结果
			if(r){
				$.get("json/save.json",{"id":selected.id},function(result){
					if(result.success){
						$.messager.alert("温馨提示","删除成功","info")
						//重新加载数据
						$("#employee-grid").datagrid('reload');
					}else{
						$.messager.alert("温馨提示","删除失败","info")
					}
				})
			}
		})
	}
},

8.修改（edit）

获取选择的行，没有选择弹出提示框
隐藏密码框
关闭密码框验证
弹出form表单，并数据回显
提交表单（save功能）

edit:function(){
	var selected = $("#employee-grid").datagrid("getSelected")
	if(selected==null){
		$.messager.alert("温馨提示","请选择一行需要修改的数据","info")
	}else{
		$("tr[pwd=true]").hide();
		$("tr[pwd=true] input").validatebox('disableValidation');
		selected["department.id"] = selected.department.id;
		$("#formDlg").dialog('open');
		$("#operateForm").form('load',selected);
	}
},

9.搜索（search）

获取搜索表单数据
发送请求查询数据，并返回JSON格式
重新加载表格

search:function(){
	//获取表单数据
	var params = $("#searchForm").serializeObject();
	//发送请求查询数据返回json，调用load方法重新加载表格
	$("#employee-grid").datagrid('load',params);
}

10. 验证功能

easyui只提供了四种验证规则：

email：匹配E-Mail的正则表达式规则。
url：匹配URL的正则表达式规则。
length[0,100]：允许在x到x之间个字符。
remote[‘http://…/action.do’,‘paramName’]：发送ajax请求需要验证的值，当成功时返回true。
可以自定义验证规则，需要重写$.fn.validatebox.defaults.rules中定义的验证器函数和无效消息。
可以引入拓展功能来进行验证

//需要引入的文件
<!-- jquery.jdirk.js-->
<script type="text/javascript" src="easyui/plugin/jquery.jdirk.js"></script>
<!--引入验证功能 -->
<script type="text/javascript" src="easyui/plugin/jeasyui.extensions.validatebox.rules.js"></script>
<!--引入css -->
<link rel="stylesheet" type="text/css" href="easyui/plugin/jeasyui.extensions.validatebox.css">