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

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

 

来看看效果:


基于easyui for jQuery的机电设备管理系统范例_第1张图片
 
基于easyui for jQuery的机电设备管理系统范例_第2张图片

你可能感兴趣的:(JavaScript,jquery,配置管理,项目管理,ext)