easyui实例案例介绍
2024-05-09 09:51:04
本篇主要例举easyui的实例如下：博主这里也只是简单的介绍了一些easyui常用的，建议学习的话，可以参考easyui的学习文档api学习，可能要更加好，更加全面，博主这里可能介绍的并不全面。希望对你有点帮助 ，加油!
easyui datagrid数据表格一：
运行项目：输入：http://localhost:8080/easyuiDemo1/easyui/12-datagrid.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>easyui数据表格</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script></head><body><table id="tt" width="100%"></table></body><script type="text/javascript">
$('#tt').datagrid({url : '/UserServlet?method=findAll',title:'用户列表',height:800,fitColumns:true,//扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动columns:[[ {field:'id',title:'编号',width:80},{field:'username',title:'用户名',width:80},{field:'password',title:'密码',width:80},{field:'sex',title:'性别',width:80},{field:'age',title:'年龄',width:80},{field:'birthday',title:'出生日期',width:80},{field:'city',title:'所属城市',width:80},{field:'salary',title:'薪资',width:80},{field:'starttime',title:'开始时间',width:200},{field:'endtime',title:'结束时间',width:200},]],pagination:true, //在 datagrid 的底部显示分页栏pageSize:10, //初始化页码 ,每页显示多少条pageList:[5,10,15,20], //初始化页面尺寸的选择列表
});</script>
</html>效果图如下：
easyui datagrid数据表格二：
<%@ 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>easyui数据表格</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script></head><table id="mytb" style="width:200px;height:300px"></table><script type="text/javascript">$('#mytb').datagrid({title: '中国感动人物', //表格名称iconCls: 'icon-edit', //图标width:800, //表格宽度height:'auto', //表格高度，可指定高度，可自动border:true, //表格是否显示边框url:'datagrid.php', //获取表格数据时请求的地址columns:[[{field:'id',title:'编号',width:100,hidden:false},{field:'name',title:'姓名',width:100},{field:'age',title:'年龄',width:100},{field:'school',title:'人物名称',width:100}]],pagination:true,//如果表格需要支持分页，必须设置该选项为truepageSize:5, //表格中每页显示的行数pageList:[5,10,15],rownumbers:true, //是否显示行号nowrap: false, striped: true, //奇偶行是否使用不同的颜色method:'get', //表格数据获取方式,请求地址是上面定义的urlsortName: 'ID', //按照ID列的值排序sortOrder: 'desc', //使用倒序排序idField: 'id',loadMsg:'数据正在努力加载，请稍后...', //加载数据时显示提示信息frozenColumns: [[ //固定在表格左侧的栏{field: 'ck', checkbox: true},]],toolbar: [{text: '添加',iconCls: 'icon-add',handler: function() {getSelectIds('mytb','没有选择');}}, '-', {text: '删除',iconCls: 'icon-cut',handler: function() {getSelectIds('mytb','没有选择');}}, '-', {text: '修改',iconCls: 'icon-save',handler: function() {getSelectIds('mytb','没有选择');}}]});</script></body>
</html>效果图如下：
validatebox验证框：
<%@ 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>layout</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script></head>
<script type="text/javascript">
/* 用户验证 */
$.extend($.fn.validatebox.defaults.rules, {midLength : {validator : function(value, param) {return value.length >= param[0] && value.length<= param[1];},message : ''}
});
/* 密码验证 */
$.extend($.fn.validatebox.defaults.rules, {equalLength : {validator : function(value, param) {return value.length == param[0] ;},message : '密码必须为4个字符!'}
});</script>
<body >
<!-- 用户输入验证框 -->
<tr>
<td>
请输入用户名:<input class="easyui-validatebox" type="text" validType="midLength[2,5]"
id="userid" name="username" with="180" required=true missingMessage="用户名必填" invalidMessage="用户名必须在2到5个字符之间!"/>
</td>
</tr>
<br/>
<br/>
<tr>
<td>
<!-- 密码输入验证框 -->
请输入用户密码：<input class="easyui-validatebox" type="password" validType="equalLength[4]"id="passwordid" name="password" with="180" required=true missingMessage="密码必填"/>
</td>
</tr>
<br/>
<br/>
</html>
效果如下：
message提示框架：
<%@ 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>layout</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script></head>
<script type="text/javascript">
$(function(){//弹出提示信息 $为jquery的全局对象//$.messager.alert('提示','这个警告是提示信息'); //$.messager.alert('提示','这个警告是提示信息','warning'); $.messager.alert('提示','这个警告是提示信息','warning',function(){//窗口关闭时触发的回调函数。alert('ok');});
});
</script>
<body ></body>
</html>效果图如下：
easyui lyout布局：
<%@ 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>layout</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script></head>
<script type="text/javascript">
$("a[title]").click(function() {//获取点击的那个a标签的titlevar src = $(this).attr("title");var title = $(this).html();//判断选项卡有没有存在，如果存在则选中，不存在添加if($("#tt").tabs('exists',title)){$("#tt").tabs('select',title);}else{//添加选项卡$('#tt').tabs('add', {title : title,content : '<iframe frameborder="0" style=width:100%;height:100% src='+src+'></iframe>',closable : true});}
});</script>
<body ><div id="cc" class="easyui-layout" fit=truestyle="width: 100%; height: 1000px"><div region="north" title="North Title" split="true"style="height: 100px;"></div><div region="west" split="true" title="菜单" iconCls="icon-ok"style="width: 200px;"><div id="aa" class="easyui-accordion"style="width: 300px; height: 200px;" fit=true><div title="用户管理" iconCls="icon-save"style="overflow: auto; padding: 10px;"><div><a title="001_message.jsp" style="color: #0099FF;">用户列表</a></div><div><a title="002_window.jsp" style="color: #0099FF;">功能列表</a></div></div><div title="权限管理" iconCls="icon-reload" selected="true"style="padding: 10px;">content2</div><div title="资源管理" iconCls="icon-reload">content3</div></div></div><div region="center" title="center title"style="padding: 5px; background: #eee;"><div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;"fit=true></div></div>
</div>
</body>
</html>效果图如下：
easyui实例案例介绍相关推荐
- Spark Streaming 图片处理案例介绍
Spark Streaming 图片处理案例介绍 本文首先介绍了流式处理框架的设计原理.Spark Streaming 的工作原理,然后通过一个基于 Spark Streaming 编写的读取.分析. ...
- mysql连接池永驻_【学习笔记】Oracle连接池 数据库常驻连接池(Database Resident Connection Pool)案例介绍...
天萃荷净 分享一篇关于应用程序与Oracle数据库连接的连接方法介绍,数据库常驻连接池(Database Resident Connection Pool)案例介绍 一.介绍常驻连接池(Databas ...
- Vue2 应用测试学习 02 - TDD 案例（案例介绍和创建、编写测试用例）
案例介绍 下面使用 TodoMVC 提供的开源 Todos List 任务清单示例,学习使用 TDD 方式开发 Vue 应用. 案例演示效果:Vue.js • TodoMVC 基本功能包括: 输入任务 ...
- 静态代理和动态代理案例介绍
静态代理和动态代理案例介绍 1.代理模式概念 2.代理模式分类 3.静态代理(1) [1]目标 [2]实现 [2.1]创建项目 [2.2]定义HouseAgencyCompany [2.3]定义Hou ...
- 详解设计模式之装饰者模式[以奶茶为案例介绍]
背景案例介绍 以奶茶为例,如下图所示,Beverage(饮料)是一个抽象类,类里面有一个description(描述)实例用来描述该奶茶,可以描述出奶茶的分类,奶茶有很多种分类,比如抹茶,波霸,玛奇朵 ...
- mysql 5.1 innodb trx_mysql 优化innodb_flush_log_at_trx_commit的案例介绍
mysql 优化innodb_flush_log_at_trx_commit的案例介绍,供大家学习参考. 问题描述: Win7上装了一个MYSQL,需要向表中插入160多万条数据,SQL文件大概126 ...
- 什么是HADOOP、产生背景、在大数据、云计算中的位置和关系、国内外HADOOP应用案例介绍、就业方向、生态圈以及各组成部分的简介（学习资料中的文档材料）
1. HADOOP背景介绍 1． 1.1 什么是HADOOP 1. HADOOP是apache旗下的一套开源软件平台 2. HADOOP提供的功能:利用服务器集群,根据用户 ...
- 噪声与振动控制工程手册_声学分享客噪声与振动控制篇大型隔振工程案例介绍...
第一期<声学分享客--噪声与振动控制篇>将于今日上午10:00~11:00,在线直播,欢迎各位上线交流. 主讲人:苏宏兵 报告内容:大型隔振工程案例介绍 报告人介绍: 苏宏兵,工学硕士,高 ...
- 基于CSMA -CA协议的无线星型网络的应用案例介绍
1.CSMA/CA特点 在无线网络通信中,一种被称为CSMA/CA的协议解决了上诉数据冲突问题,CSMA(Carrier Sense Multiple Access),中文为冲突避免的载波侦听多路访问 ...
- 调整oracle scn,在Oracle中增进SCN及案例介绍
在Oracle中增进SCN及案例介绍,然后尝试连接别的用户,连接成功.最后exp整个数据库,重建数据库后导入数据,整个数据库恢复成功 在Oracle数据库中我们可以利用oracle的内部事件调整SCN ...
最新文章
- RStudio版本号管理 整合Git
- https HttpsURLConnection请求的单向认证
- Java应用程序与小程序之间有那些差别？
- python处理中文字符串_python字符串中的中文处理
- [Hnoi2006]马步距离
- 人工智能（9）---人工智能的发展趋势是什么？人工智能的行业应用
- SIP、SAP与SDP
- java 动软_动软代码生成器下载_2017动软代码生成器下载及相关推荐 - noYes软件大全...
- Windows USB驱动开发点滴积累备忘录
- 车机没有carlife可以自己下载吗_长安CS55自带百度CarLife使用方法
- 本博客体系系列篇(一)
- 机器学习基础：极大似然估计（Machine Learning Fundamentals: Maximum Likelihood Estimation）
- linux查服务器硬件PN号,查看linux系统常用的命令，Linux查看系统配置常用命令
- 《代码整洁之道》阅读分享
- 我最近在看什么 -《富爸爸穷爸爸》
- linux挖矿的清理工具,Linux挖矿病毒的清除与分析
- 扪心自问！15个IT技术人员必须思考的问题
- 身为一个SEO/SEM/运营专员，一天的工作是怎样的？
- Java语言基础-面向对象编程三步走之打开冰箱门
- 今天跟好朋友的一段超长爆笑聊天记录（QZone搬家）