EasyUI

最新推荐文章于 2024-08-25 09:41:52 发布

慕北丶

最新推荐文章于 2024-08-25 09:41:52 发布

阅读量211

点赞数

分类专栏： EasyUI

本文链接：https://blog.csdn.net/qq_42539533/article/details/89163097

版权

EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了使用EasyUI框架实现登录（login.jsp）、用户（user.jsp）和首页（home.jsp）的功能。从界面设计到交互逻辑，展示了EasyUI在构建Web应用中的基本用法。

摘要由CSDN通过智能技术生成

文章目录

login.jsp
user.jsp
home.jsp

login.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta 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/demo.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.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"
					onclick="submitForm()" style="width: 80px">登录</a> <a
					href="javascript:void(0)" class="easyui-linkbutton"
					onclick="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>

user.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>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){
    						 //刷新页面
    						 $('#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="#" class="easyui-linkbutton" onclick="openWindow()"
		data-options="iconCls:'icon-add',plain:true">添加</a>
		<a href="#" class="easyui-linkbutton" onclick="goUpdate()"
		data-options="iconCls:'icon-edit',plain:true">修改</a>
		<a href="#" class="easyui-linkbutton" onclick="saveUpdate()"
		data-options="iconCls:'icon-save',plain:true">保存</a>
		<a href="#" class="easyui-linkbutton" onclick="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" onclick="submitForm()" style="width:80px">添加用户</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清空</a>
			</div>
		</div>
    </div>
</body>
</html>

home.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta 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/demo.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.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>
	
	<div id="cc" class="easyui-layout" style="width:100%;height:740px;">
	
	<!-- 顶部 -->
    <div data-options="region:'north',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="#">文档</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)" onclick="goTabs()"><span>用户管理</span></a>
			    				
			    			</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>
	</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>