`
stworthy
  • 浏览: 525676 次
  • 来自: ...
社区版块
存档分类
最新评论

基于easyui for jQuery的机电设备管理系统范例

    博客分类:
  • AJAX
阅读更多

easyui for jQuery项目地址:http://jquery-easyui.wikidot.com/

 

编写这个范例的目的在于介绍easyui的基本用法,这个例子中着重于介绍布局。

来看首页的布局:

    <body>
		
		<div region="north" style="background:#fafafa;color:#2d5593;height:40px;">
		    <div style="font-size:16px;font-weight:bold;width:400px;padding:10px 0 0 10px;">机电设备管理系统</div>
		</div>
		
		<div region="west" title="导航菜单" split="true" fit="true" style="width:150px;">
			<div id="menus">
				<div title="业务操作">
					<table style="width:100%;">
						<tr>
							<td class="menu">
								<a href="javascript:addTab('设备档案','device/index')">
									<img src="images/print_class.png"></img><br/>
									<span>设备档案</span>
								</a>
							</td>
						</tr>
						<tr>
							<td class="menu">
								<a href="javascript:addTab('设备申购')">
									<img src="images/kdmconfig.png"></img><br/>
									<span>设备申购</span>
								</a>
							</td>
						</tr>
						<tr>
							<td class="menu">
								<a href="javascript:addTab('设备维修')">
									<img src="images/package_settings.png"></img><br/>
									<span>设备维修</span>
								</a>
							</td>
						</tr>
					</table>
				</div>
				<div title="数据设置">
					<table style="width:100%;">
						<tr>
							<td class="menu">
								<a href="javascript:addTab('区域设置')">
									<img src="images/package.png"></img><br/>
									<span>区域设置</span>
								</a>
							</td>
						</tr>
						<tr>
							<td class="menu">
								<a href="javascript:addTab('设备类别')">
									<img src="images/kontact.png"></img><br/>
									<span>设备类别</span>
								</a>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		
		<div region="center" fit="true">
			<div id="main-center">
				<div title="首页" style="padding:20px;">
					<img src="images/banner.gif"></img>
					<div style="margin-top:20px;">
					<p>该系统是一个由etmvc和easyui for jQuery技术构建的应用示例,如果您对本系统所使用的技术感兴趣,请与我们联系。</p>
					<p>&nbsp;</p>
					<p>设备管理是一款记录设备使用流程的软件,其中有设备信息录入,设备类别设置,区域信息的录制,设备的使用流程,设备使用流程中出错的处理,以及报表查询等功能。</p>
					<p>&nbsp;</p>
					<p>我们对系统进行简化,旨在说明一般功能的开发方法。</p>
					</div>
				</div>
			</div>
		</div>
    </body>

我们不用写一大堆JS代码,取而代之是用基本的HTML,这对网页设计者而言是最直接最直观的。

怎样让这个布局定义发生作用,看下面的代码:

		    	$('#menus').accordion();
		    	$('#main-center').tabs();
		    	$('body').layout();

用少量的代码做最多的事情,这是jQuery的风格。

 

设备档案表格正常显示需要配置好数据库:

1、使用MYSQL。

2、配置文件:/WEB-INF/classes/activerecord.properties

3、执行程序:http://localhost:8080/easyui-test1

 

来看看效果:



 

  • 大小: 65.3 KB
  • 大小: 62.3 KB
分享到:
评论
27 楼 aa00aa00 2011-10-13  
看了您的easyui,真是不错啊,学习了.
26 楼 EchoZhouYou 2010-12-03  
很好的东西,谢谢分享
25 楼 cnhao77 2010-10-15  
可以啊,我收下了
24 楼 darwintest 2010-09-15  
风格不错,代码也不麻烦,喜欢
23 楼 满月无双 2010-06-18  
不错,正在学习。。。
22 楼 stworthy 2010-05-06  
可以参考:http://jquery-easyui.wikidot.com/forum/t-222581/datagrid-toolbar
21 楼 hcjhuanghe 2010-05-06  
请问,如何在表格上方的工具栏中显示一个ComboBox?
20 楼 walle1027 2010-04-12  
提几个问题,希望能纠正
第一,多个tab无法实现延迟加载,会同时把所有tab加载过来
第二,左边的according,重复点击会有bug,
不过整体感觉非常不错,希望努力,并且希望见到源代码。
19 楼 skyblue1984 2010-04-09  
jq的控件级封装 命名冲突问题很麻烦啊..
不知道easyui里怎么解决
比如 grid跟tree都有selected()方法
都引入的话直接就冲突了.
18 楼 liubiqu 2010-04-02  
我最近也在学习easyui 感觉比extjs更直观更易懂,但就是担心成熟性与稳定性。
17 楼 kenchen0805 2010-01-29  
能同时关闭多个tab吗?在其中一个tab上点右键
16 楼 stworthy 2010-01-22  
请下载1.0.1版本,可以通过
.tabs('exists',title)
判断一个TAB是否存在。
15 楼 rao104932467 2010-01-22  
leon1509 写道
同一个tab能打开多次?


怎么解决这样的问题呢!~
14 楼 horseroad 2010-01-22  
tomcat为什么运行不起来呢?
13 楼 stkfordgk 2010-01-05  
学习一下,我刚毕业。现在的web技术真让人开眼了.
12 楼 fnet 2009-12-24  
非常好,喜欢简洁的风格。
11 楼 hb315 2009-12-22  
东西不错,不过只是jq的东西汇总了一下,而且例子也不全面,好像还不能说是1.0,应该为测试版或0.8预览版吧!
如果再成熟点,大家不介意花点钱的。具体你们的协议,英文的,没时间劳神去看!
10 楼 bluethink 2009-12-22  
感觉很清爽,很简单,我喜欢
9 楼 HenryYu 2009-12-22  
不错,好东西!
8 楼 xinnn 2009-12-22  
有的搞,支持,比ext看着舒服多了,很清爽

相关推荐

    基于jquery-easyui的机电设备管理系统布局新范例

    在这个“基于jquery-easyui的机电设备管理系统布局新范例”中,我们将深入探讨EasyUI在机电设备管理系统的应用以及布局设计的新趋势。 首先,jQuery EasyUI的核心在于其组件化的设计理念。通过预定义的CSS样式和...

    EasyUI+JQuery统一权限管理ASPNET源码

    技术特点:EasyUI,JQuery,统一权限管理系统(aspx面完成显示 ashx处理所以请求) 功能描述: 商家管理:促销活动 产品管理 卡密管理 财务管理 促销商家 合作商家 慈善管理:慈善排名 慈善比例管理 奖池管理:已捐赠...

    基于jquery-easyui的用户管理系统实例

    【基于jQuery EasyUI的用户管理系统】是一个典型的Web应用程序实例,它利用了jQuery EasyUI这个强大的前端框架来构建用户友好的界面,并结合后端技术(如PHP)处理数据交互。EasyUI是一个基于jQuery的UI库,提供了...

    EasyUI for JQuery官方文档.pdf

    EasyUI是一套基于JQuery的前端框架,它为开发者提供了一套丰富的UI组件库,能够帮助开发者快速构建具备良好交互性的Web应用界面。它遵循简单易用的原则,使得在不需要过多编码的基础上,就可以实现复杂和多样化的...

    基于EasyUI的仓库管理系统

    《基于EasyUI的仓库管理系统详解》 在当今信息化社会,企业对仓库管理的效率与准确性提出了更高的要求。基于EasyUI的仓库管理系统应运而生,它利用先进的Web技术和易用的用户界面,为企业提供了一种高效、便捷的...

    基于easyui做的一套管理系统

    在这个“基于easyui做的一套管理系统”中,我们可以推测开发者利用 EasyUI 的功能创建了一个高效的企业级管理平台。 首先,EasyUI 提供了诸如对话框(dialog)、表格(datagrid)、表单(form)、下拉菜单...

    基于mysql5.0+servlet2.5+jsp+ajax+easyui+jquery的学生信息管理系统源码+项目说明.zip

    基于mysql5.0+servlet2.5+jsp+ajax+easyui+jquery开发的学生信息管理系统源码+项目说明(基本信息管理、课程信息管理、选课、考勤与签到、成绩信息管理).zip 基于mysql5.0+servlet2.5+jsp+ajax+easyui+jquery开发的...

    基于easyUi框架OA办公管理系统页面模板VIP.rar

    jQuery基于easyUi前端框架开发OA办公安全管理界面模板。包括功能菜单、权限管理、用户管理、人员管理、部门管理、角色管理、表格管理、表单管理、报表管理、统计分析、流程图、地图、日程管理等十多个界面。

    EasyUI+JQuery统一权限管理

    EasyUI,JQuery,统一权限管理系统(aspx面完成显示 ashx处理所以请求) 商家管理:促销活动 产品管理 卡密管理 财务管理 促销商家 合作商家 慈善管理:慈善排名 慈善比例管理 奖池管理:已捐赠管理 已领取管理 待领取...

    基于mysql5.0+servlet2.5+jsp+ajax+easyui+jquery开发的学生信息管理系统源码.zip

    基于mysql5.0+servlet2.5+jsp+ajax+easyui+jquery开发的学生信息管理系统源码+项目说明(基本信息管理、课程信息管理、选课、考勤与签到、成绩信息管理).zip 基于mysql5.0+servlet2.5+jsp+ajax+easyui+jquery开发的...

    easyui+jquery实用项目

    EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了丰富的组件和强大的功能,使得开发者可以快速构建出美观且响应式的Web应用。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作以及...

    基于easyui+mysql的仓库管理系统

    《基于EasyUI+MySQL的仓库管理系统详解》 仓库管理系统的构建是企业信息化进程中不可或缺的一环,它能够有效地提升库存管理效率,减少人为错误,优化资源配置。本仓库管理系统以EasyUI和MySQL为核心技术,构建了一...

    jquery easyui机电管理系统demo下载

    **jQuery EasyUI 机电管理系统详解** jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它提供了丰富的用户界面组件,便于快速构建美观、响应式的 Web 应用程序。在"jquery easyui 机电管理系统demo下载"中,我们...

    基于SSM+jQuery EasyUI开发的生产管理ERP系统源码+项目说明(高分毕设).zip

    【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业...基于SSM+jQuery EasyUI开发的生产管理ERP系统源码+项目说明(高分毕设).zip

    javaee学生管理系统,教务管理系统,用了mysql,easyui,jquery,

    JavaEE学生管理系统与教务管理系统的实现主要基于一系列先进的技术和工具,其中包括MySQL数据库、EasyUI前端框架以及jQuery库。在本文中,我们将深入探讨这些关键组件及其在系统开发中的作用。 首先,JavaEE(Java ...

    jQuery EasyUI EasyUI 组件范例

    jQuery EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了一套丰富的 UI 组件库,包括按钮、表单、网格、树形结构等,可以极大地简化前端开发工作,使得开发者能够更加专注于业务逻辑的实现而无需过多地关注...

    基于easyui+springmvc实现的文件管理系统

    【标题】:“基于EasyUI+SpringMVC实现的文件管理系统” 在现代企业信息化管理中,文件管理系统扮演着至关重要的角色,它能够有效地组织、存储、检索和管理企业内部的各类文档,提高工作效率,保证信息的安全性。本...

    基于ASP.NET MVC4+JQuery easyui的企业管理系统开发案例源码

    《基于ASP.NET MVC4+JQuery easyui的企业管理系统开发详解》 在当今信息化时代,企业管理系统已经成为企业管理不可或缺的一部分。本文将深入探讨一个基于ASP.NET MVC4框架和JQuery EasyUI库构建的企业管理系统的...

    jQuery_easyui+jQuery1.7API

    jQuery EasyUI 是基于jQuery的一个轻量级的前端框架,它提供了一系列的JavaScript组件,如对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)等,帮助开发者快速构建用户界面。EasyUI的主要优点在于其简洁...

    SSH+Jquery easyUI后台管理系统

    SSH+jQuery EasyUI后台管理系统是一种基于Struts2(S)、Spring(S)和Hibernate(H)三大开源框架的Web应用程序开发模式,结合jQuery EasyUI前端框架,构建出高效、简洁且具有现代感的后台管理界面。这个系统设计的...

Global site tag (gtag.js) - Google Analytics