EasyUI-1

最新推荐文章于 2020-02-22 14:30:09 发布
最新推荐文章于 2020-02-22 14:30:09 发布
阅读量145 收藏
点赞数
分类专栏： EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42539533/article/details/89108839
版权

文章目录

EasyUI网页：

http://www.jeasyui.net/

页面布局

<%@ 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/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 class="easyui-layout">
	<!-- 顶部  -->
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
    
    </div>
    <!-- 底部  -->
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">
    
    </div>
    <!-- 左侧 公告栏  -->
    <div data-options="region:'east',title:'East',split:true" style="width:100px;">
    
    </div>
    <!-- 右侧 菜单栏  -->
    <div data-options="region:'west',title:'West',split:true" style="width:100px;">
    
    </div>
    <!-- 中间 主体类容  -->
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
    
    </div>
</body>
</html>

在整个页面布局：

<body class="easyui-layout">

在这里插入图片描述

登录页面

<%@ 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>

在这里插入图片描述

主页

<%@ 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>

查找数据

<%@ 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},
		    		{field:'password',title:'密码',width:100},
		    		{field:'age',title:'年龄',width:100,	
		    			formatter: function(value,row,index){
						if (row.age){
							return row.age+"<font color='red'>岁</font>";
						} else {
							return value;
						}
					}},
		    		{field:'address',title:'地址',width:100,			
						styler: function(value,row,index){
							if (index == 1){
								return 'color:red;';
								// the function can return predefined css class and inline style
								// return {class:'c1',style:'color:red'}
							}
						}
					}
		        ]]
		    });
	    });
	</script>
</head>
<body style="border: 0px;">
	<div id="tb">
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
	</div>
	<table id="dg"></table>
</body>
</html>

在这里插入图片描述

慕北丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui-textbox和easyui-combobox的onchange事件响应实例
08-01
在这个实例中，我们将深入探讨 EasyUI 中的两个重要组件：`easyui-textbox` 和 `easyui-combobox`，以及它们的 `onchange` 事件响应。 `easyui-textbox` 是一个基础输入框组件，它扩展了原生 HTML 的 `input` 元素...
使用easyui实现的添加公告功能（后台管理）
于海强的博客
12-22 1万+
easyui用来做后台管理还是很方便的，这两天又添加了几个小功能其中一个是添加公告。可以包括前台的公告。还有后台给管理员看的公告。后端实现的还是很粗糙的。实际项目中，公告具体出现的位置还有时机都应该是固定的。所以可以事先为这些公告定义标示，创建表结构中指定主键唯一标示这些公告。到时候通过主键获取公告。但是由于我现在需求还是不清晰。并不知道需要多少公告。所以添加公告时需要管理员为公告指定主键。等项目
显示数据（公告通知详细界面）
choumengxi7805的博客
01-11 633
package com.avicsafety.dangerous_chemicals; import java.util.ArrayList; import java.util.List; import org.xutils.x; import org.xutils.http.Reques...
11行代码实现滚动公告栏
weixin_42886104的博客
01-15 6508
使用JavaScript&amp;jQuery 效果图：   首先看HTML结构，css样式这里不再给出 &lt;div class="book_class"&gt; &lt;div id="dome"&gt; &lt;div id="dome1"&gt;
[easyUI] textbox的disabled属性和disable方法
热门推荐
wolfkingkg0129的专栏
12-16 2万+
在easyUI中操作textbox进行disable和enable状态切换时有两种方法： 方法一、使用disabled属性进行操作，$("#xxx").textbox({disabled:true})/$("#xxx").textbox({disabled:false}) 方法二、使用disable和enable方法进行操作，$("#xxx").textbox('disable')/$("#x
jquery-easyui-1.7.0.zip官方文档
11-04
1. 数据绑定：EasyUI 提供了数据绑定功能，可以轻松地将后台数据与前端UI组件关联，实现数据的动态展示和更新。 2. 组件丰富：包括对话框（Dialog）、表格（Grid）、表单（Form）、菜单（Menu）、树形控件（Tree）...
jquery-easyui-EDT-1.5.2-build1
05-08
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jquery-easyui-1.4.5_easyuiapi_
10-03
1. **EasyUI概述** EasyUI 是一套轻量级的前端框架，它基于jQuery，提供了诸如对话框、表格、下拉菜单、树形结构、面板等众多UI组件。1.4.5版本在前一版本的基础上优化了性能，增加了新功能，并修复了一些已知问题...
jquery-easyui-1.5.5.zip
04-26
easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui...
非常漂亮的easyui后台模板
07-24
非常漂亮的easyui的后台模板，全部是html+js组成！非常漂亮！可以下载学习！
jQuery:增强型走马灯公告栏，可以抛弃marquee标签了
weixin_33756418的博客
06-29 822
1.Html代码：1 2 3 4 5 6 7 8 9 10 11 12 13 14 &lt;div id="container"&gt; &lt;ul class="noticeList"&gt; &lt;li&gt;&lt;a href="http://www.ihiro.org/wordpress-the-article-automati...
做个简单的公告栏
Yjl_Richard的博客
05-21 3407
简介该博客通过使用Unity自带的UI系统以及碰撞盒实现一个简单的公告栏。对象处理制作思路是这样的，当点击按钮时，公告就会弹出，然后因为他们都有碰撞盒的属性，所以他们会互相排斥，从而达到一个展开的效果。再次点击时，则需要复原，这里就通过获取公告栏展开的情况来通过Update函数来更新位置。 先生成一个Canvas 大概就是这样，Panel用来搭载背景，Button就是用来实现按钮功能，Ima
[原创]一个公告栏的源码（利用marquee作的）
weixin_34006965的博客
08-15 373
&lt;SCRIPT language=JavaScript&gt; &lt;!--                                                                                            //                                                                ...
EasyUI DataGrid带条件分页
leeocean的博客
02-22 364
使用EasyUI DataGrid分页功能，需要添加‘人员分类’条件进行查询，界面如下图。 一、添加DataGrid组件属性： $('#grdMain').datagrid({ //url: 'EmployServlet?act=load', // 不需要设置这个属性 pagination: true, pageList: [10, 20, 50, 100], p...
【easyui】—easyui教你编写一个前台的架子
admin87012的博客
06-21 218
以前做项目都是在别人搭建好的环境下直接编写单独的页面，也没有处理过怎么搭建一个框架。看到别人的布局都挺好的，自己也想做一个走一下流程。 嘿，刚开始时看着别人写的代码，去找怎么写。 这是我自己的想法，使用easyui-accordion这种分类来做的。做一个二级的菜单，其实菜单里面的各个可以点击的菜单用ul li这种列表来做。大体设计到的元素就这些。 想看一下最后的结果，页面没有添加...
easyui-draggable
最新发布
02-14
2. 在需要应用拖拽功能的元素上添加class="easyui-draggable"属性。 3. 可选：通过设置属性来自定义拖拽的行为，如设置axis属性限制只能在水平或垂直方向拖拽，设置handle属性指定拖拽的手柄元素等。 下面是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值