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

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

    博客分类：
  • AJAX
jQuery配置管理项目管理JavaScriptEXT 
阅读更多

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
分享到：
| DataGrid for jQuery基本用法--定义表头
评论
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看着舒服多了，很清爽
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics