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

stworthy

浏览: 525624 次
来自: ...

最近访客更多访客>>

yanxunjian

zhangph739

ccinss7974617

newbeehi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery EasyUI

jQuery 项目管理 EXT 企业应用 JavaScript

使用jquery-easyui的新版本1.0.2，可以更有效地完成页面的布局设计。做页面布局时一般是不用编写JS代码的，下面重写了机电设备管理系统，仅供参考。

首先来看首页布局例子：

    <body class="easyui-layout">
		<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" style="width:150px;">
			<div class="easyui-accordion" fit="true" border="false">
				<div title="业务操作" selected="true" style="overflow:auto;">
					<div class="nav-item">
						<a href="javascript:addTab('设备档案','device/index')">
							<img src="images/print_class.png"></img><br/>
							<span>设备档案</span>
						</a>
					</div>
					<div class="nav-item">
						<a href="javascript:addTab('设备申购')">
							<img src="images/kdmconfig.png"></img><br/>
							<span>设备申购</span>
						</a>
					</div>
					<div class="nav-item">
						<a href="javascript:addTab('设备维修')">
							<img src="images/package_settings.png"></img><br/>
							<span>设备维修</span>
						</a>
					</div>
				</div>
				<div title="数据设置" style="overflow:auto;">
					<div class="nav-item">
						<a href="javascript:addTab('区域设置')">
							<img src="images/package.png"></img><br/>
							<span>区域设置</span>
						</a>
					</div>
					<div class="nav-item">
						<a href="javascript:addTab('设备类别')">
							<img src="images/kontact.png"></img><br/>
							<span>设备类别</span>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div region="center">
			<div id="main-center" class="easyui-tabs" fit="true" border="false">
				<div title="首页" style="padding:20px;">
					<img src="images/banner.gif"></img>
					<div style="margin-top:20px;">
					<p>该系统是一个由etmvc和jquery-easyui技术构建的应用示例，如果您对本系统所使用的技术感兴趣，请与我们联系。</p>
					<p>&nbsp;</p>
					<p>设备管理是一款记录设备使用流程的软件，其中有设备信息录入，设备类别设置，区域信息的录制，设备的使用流程，设备使用流程中出错的处理，以及报表查询等功能。</p>
					<p>&nbsp;</p>
					<p>我们对系统进行简化，旨在说明一般功能的开发方法。</p>
					</div>
				</div>
			</div>
		</div>
    </body>

在BODY上应用了layout布局，这种效果同EXT的VIEWPORT相似，看下效果图：

新tab的增加是动态的，如果已经存在一个TAB则打开该面板，否则新建一个，看一个这个函数：

	    	function addTab(title, href){
		    	var tt = $('#main-center');
		    	if (tt.tabs('exists', title)){
			    	tt.tabs('select', title);
		    	} else {
			    	if (href){
				    	var content = '<iframe scrolling="no" frameborder="0"  src="'+href+'" style="width:100%;height:100%;"></iframe>';
			    	} else {
				    	var content = '未实现';
			    	}
			    	tt.tabs('add',{
				    	title:title,
				    	closable:true,
				    	content:content
			    	});
		    	}
	    	}

下面来看看DATAGRID页面的布局，因为使用了DATAGRID，而这个表格比较复杂，所以有一部分的JS代码量：

<body class="easyui-layout">
	<div region="center" style="padding:5px;" border="false">
		<table id="tt" fit="true">
			<thead>
				<tr>
					<th field="code" width="60">编号</th>
					<th field="name" width="100">名称</th>
					<th field="style" width="100">型号规格</th>
					<th field="area.name" width="80" formatter="areaName">区域</th>
					<th field="manufacturer" width="100">生产厂家</th>
					<th field="factoryCode" width="100">出厂编号</th>
					<th field="country" width="60">生产国别</th>
					<th field="productionDate" width="80">生产日期</th>
					<th field="purchaseDate" width="80">购买日期</th>
				</tr>
			</thead>
		</table>
	</div>
</body>

			$('#tt').datagrid({
				url:'/easyui-dms/device/getDevices',
				pagination:true,
				toolbar:[{
					text:'新增',
					iconCls:'icon-add'
				},'-',{
					text:'修改'
				},'-',{
					text:'删除',
					iconCls:'icon-remove'
				},'-',{
					text:'查询',
					iconCls:'icon-search'
				}]
			});

好了，需要编写的代码就这么多，看一下效果图：

dms-sql.rar (1.6 KB)
下载次数: 3436

easyui-dms.rar (1.3 MB)
下载次数: 6942

查看图片附件

分享到：

jquery-easyui中创建复杂的布局效果 | jquery-easyui中为datagrid加入分页功能

2010-02-05 14:53
浏览 11009
评论(38)
论坛回复 / 浏览 (37 / 41880)
分类:Web前端
查看更多

38 楼 ruangf 2010-12-12

请问datagrid怎么设置一个隐藏域？表中的一般id都做隐藏域使用的

37 楼 fywxin 2010-12-07

stworthy 写道

修改一下样式:
    <style type="text/css">
    .panel,.panel-body{
    overflow:hidden;
    }
    .tabs-container,.tabs-panels{
    overflow:hidden;
    }
    </style>

谢谢 stworthy 大神，不再出现那滚动条了，很好很强大。

36 楼 stworthy 2010-12-06

修改一下样式:
    <style type="text/css">
    .panel,.panel-body{
    overflow:hidden;
    }
    .tabs-container,.tabs-panels{
    overflow:hidden;
    }
    </style>

35 楼 fywxin 2010-12-05

feixuelove 写道

我想弱弱的问下，当tabs 存在的时候如何在左侧菜单再次点击的时候刷新已经存在的右侧TABS的页面，

同问，还有什么时候能解决chrome下最大化还原出现滚动条的问题，
发现这是个陷进，可我们已不能自拔

34 楼 feixuelove 2010-10-29

我想弱弱的问下，当tabs 存在的时候如何在左侧菜单再次点击的时候刷新已经存在的右侧TABS的页面，

33 楼 fywxin 2010-10-22

发射点啥啥

32 楼 fywxin 2010-10-22

leon1509 写道

弱弱的问一下，tab的内容不用iframe可以吗？

当然，有jquery，一切都变的简单，我不用iframe也模拟了他的功能，只是界面惨不忍睹。

楼主，那边左边栏最大话的时候，不兼容chrome浏览器，希望楼主可不可以改正。

还有那个datagrid在IE下实在没法用，所以大家可以不用这个datagrid，只用外面的套，里面的datagrid部分外面用自己的ajax实现，效果不比他的差哦。

31 楼 kaki 2010-04-27

很奇怪啊，我的Datagrid直接使用jsondata文件可以显示，用php生成的一摸一样的数据就不行了。

30 楼 braint8 2010-04-15

braint8 写道

请问下楼主：
如果我后台控制查处结果list，使用json传输到前台，要怎么写？
看你的例子是这样写
前台url:'/demo3/data/getItems',这个是ajax提交吗？如果是的话，怎么查看返回的结果？

上面的问题自己解决了，利用自己的json包，类似result那样的写法。
过程中发现一个问题：
dataGrid的排序会刷新页面，但是没有效果。

29 楼 braint8 2010-04-14

28 楼 stworthy 2010-03-03

.datagrid('clearSelections')

27 楼 zhongzhihua 2010-03-03

重新加载时，如何把checkbox选择的选项清空。好像没有办法啊。

26 楼 wm920 2010-02-24

对不同浏览器支持不好。

在 Opera浏览器下有问题

25 楼 stworthy 2010-02-24

设置idField后就能够跨页保存选中记录了，CHECKBOX的问题也随之解决。

24 楼 zhongzhihua 2010-02-23

还有点击checkbox的全选后，再点分页或把页数10改成20，有问题。

23 楼 zhongzhihua 2010-02-23

我想问一下，怎样做一个隐藏的一列,如把id放在隐藏列中。

22 楼 stworthy 2010-02-21

可以应用selectRow,selectRecord,clearSelections,unselectRow等方法让行选中，这些新方法将在下个版本1.0.3中提供。

21 楼 mickey0811 2010-02-11

请教一下楼主DataGrid怎么能默认选中checkbox

20 楼 congpeixue 2010-02-09

galford666 写道

代码混淆了，不敢用，如遇到有需要扩展的时候都扩展不了。

19 楼 leon1509 2010-02-09

不同的浏览器显示效果不一样啊！楼主重点解决下浏览的兼容问题吧！

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论