EasyUI

最新推荐文章于 2024-05-17 07:38:38 发布
最新推荐文章于 2024-05-17 07:38:38 发布
阅读量1.1k 收藏 3
点赞数 1
文章标签： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44502804/article/details/89162650
版权

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>
℡tang
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui了解
qq_64001795的博客
05-13 2880
目录 一、框架概述 1、什么是Easyui？ 2、EasyUI的常用组件 3、EasyUI的特点 缺点 使用： 4、EasyUI的目录说明 4.1下载路径 4.2 必须的基础支持库 4.3 目录说明 二、WEB项目搭建EasyUI环境 1.EasyUI入门示例 1.1标准开发步骤 1.2 代码模板 1.3 EasyUI的三大基础概念 1.3.1 属性设置 1.3.2 事件触发设置 1.3.3 方法调用设置 2.注意事项 5.关于组件之间的依赖关系 6.控件使...
easyUI
weixin_66116818的博客
05-07 322
一.easyUI的简介 easyui是一款基于jQuery的前端框架，可以使用其中的组件进行布局以及用来做后台的管理界面。 EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速提升开发效率。 使用： ① 导入EasyUI的资源 ② 查阅API文档使用EasyUI的组件完成页面开发 二.easyUI的不足之处 现在据了解到有三种UI框架，分别是easyUI、bootstra...
EasyUI简介
qq_63845026的博客
04-05 3836
目录 一：EasyUI是什么? 二: EasyUI如何使用? 三.总结 EasyUI是什么? 1.easyui是一种基于jQuery、Angular.、Vue和Re...
Web前端最新easyUI入门，2024最新大厂高频微服务面试总结
最新发布
2401_84435838的博客
05-17 717
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。虽然从效果来看，easyUI的界面效果要远远差于bootstrap，layout，但从金钱的角度上，开发首先会排除掉bootstrap从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要优于layui从公司的角度,考虑框架成本、公司的后端技术人员前端功底、前端的社区活跃度。
Easyui简介、使用介绍 即项目演
LY3054404567的博客
04-11 4707
Easyui简介 即 项目演示1、什么是Easyui1.2、easyui的不足1.3、easyUI带给我们的好处2、Easyui使用介绍2.1、下载easyui版本2.2、下载Easyui API 文档3、使用步骤(使用开发软件eclipse)3.1、引入必要的js和css样式文件3.2、导入EasyUI文件（位置自己看着来）在这里插入图片描述3.3、导入路径（**必须正确且路径正确 ！**）4、使用API文档效果演示 1、什么是Easyui easyui是一款基于jQuery的前端框架，可以使用其中的组件
EasyUI(前端框架)
热门推荐
wyy的博客
07-10 1万+
第一节 EasyUI的介绍和常用组件 [1]EasyUI的介绍 介绍: EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了 封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速 提升开发效率。 使用： ① 导入EasyUI的资源 ② 查阅API文档使用EasyUI的组件完成页面开发 注意： 使用EasyUI，其实就是在使用别人已经封装好的代码来完成自己的页面开发。 所以必须按照EasyUI的文档说明来使用。所以我们学习EasyUI，其实就是在 学习如何按
EasyUI框架
zhongliwen1981的专栏
08-21 1万+
一、概述 1.1 EasyUI是什么？ EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库，封装了许多实用的控件和功能，并且是完美支持HTML5网页的框架。提供的控件包括数据表格，树形表格，菜单，进度条，选项卡，日期组合框，调节器，对话框等等。 EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript...
EasyUI【入门】
m0_64522859的博客
05-06 616
目录 1.jQuery EasyUI框架概述 1.1 什么是jQuery EasyUI? 1.2 jQuery Easy的作用 1.3 EasyUI的目录说明 1.3.1 下载路径 1.3.2 必须的基础支持库 1.3.3 目录说明 2.WEB项目搭建EasyUI环境 搭建环境的步骤如下： 3.EasyUI入门示例 3.1 标准开发步骤 3.2 代码模板 3.3 EasyUI的三大基础概念 3.3.1 属性设置 3.3.2 事件触发设置 3.3.3 方法调用设置 4
EasyUI项目
07-07
本项目采用struts2+JDBC+easyui进行编写，对easyui各个组件进行详细介绍。 由于水平有限,项目bug在所难免,欢迎指正。 博文参考地址：http://blog.csdn.net/itmyhome1990/article/details/37502601 使用方法： 1、...
jqueryEasyUI
07-16
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得...
easyui框架
03-30
EasyUI 是一个基于 jQuery 的轻量级前端开发框架，它为开发者提供了丰富的组件，包括布局、表格、对话框、菜单、按钮、表单等，帮助快速构建用户界面和交互。这个"easyui框架"的项目源码是一个入门级别的示例，尽管...
easyui后台模版
01-19
此资源包括网上几个高分的easyui后台模版，还有自己专门下载的。 1. ace-master.zip 文件夹里面 的模版比较炫酷 2. H-ui.admin.page_v3.1.1.1.zip 的模版实用性很强，简洁美观，还有增删查改的页面，是一个实用型的后台模版。 3. easyui_demo.zip 一个简单的easyui后台模版 4. easyui+ztree后台管理系统模板.zip（8分） 和 官方EasyUI皮肤最新模板.zip（12分） 里面是到CSDN下载的。
EasyUI官方文档
05-11
有兴趣的可以看看有兴趣的可以看看有兴趣的可以看看有兴趣的可以看看有兴趣的可以看看有兴趣的可以看看有兴趣的可以看看
easyui主题
01-05
easyui 主题源码，新增了4套主题样式。让界面更加美观
EasyUI中文版手册
01-10
本资源是EasyUI1.4版本中文手册，详细介绍了基础、布局、菜单和按钮、表单、窗口、表格和树，以及扩展部分。
EasyUi使用
04-15
EasyUI 是一个基于 jQuery 的前端框架，主要用于构建用户界面，尤其适用于企业级的 Web 应用开发。它提供了丰富的组件库，包括布局、表格、表单、按钮、对话框、菜单等，使得开发者能够快速地创建出美观且功能强大的...
EasyUI前端框架下载
12-07
在描述中提到的“easyUI框架下载”，暗示我们将讨论如何获取和使用 EasyUI。 首先，你需要从官方网站或者其他可靠的资源下载 EasyUI 压缩包。文件名为“EasyUI”，通常包含以下几个核心部分： 1. **CSS 文件**：...
easyui
^.^的博客
07-28 455
1、easyui是什么东西？ easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强大的。 2、官方网...
EasyUI API与使用指南
"easyui api" EasyUI 是一个基于 jQuery 的前端框架，用于简化网页界面的开发，提供了一系列的组件如对话框、表格、菜单等。API 文档是开发者理解和使用 EasyUI 的关键参考资料。 ## Base (基础) 在 EasyUI 中，`$...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值