欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

EasyUI

程序员文章站 2024-03-21 12:57:52
...

EasyUI 的简介

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模

网址:http://www.jeasyui.net/

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>
相关标签: easyui