|
精华帖 (3) :: 良好帖 (4) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-02-05
使用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> </p>
<p>设备管理是一款记录设备使用流程的软件，其中有设备信息录入，设备类别设置，区域信息的录制，设备的使用流程，设备使用流程中出错的处理，以及报表查询等功能。</p>
<p> </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'
}]
});
好了，需要编写的代码就这么多，看一下效果图：
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-02-05
非常的不错，希望这个UI能发展的越来越好，成为JQuery企业开发UI标准。
以前在一个电网项目后期使用了DataGrid，感觉不错。 现在我们有个国外项目正准备使用这个UI。 我们有一个自定义报表查询，不知用这个Grid动态表头怎么做。还请教。 
|
| 返回顶楼 | |
|
发表时间：2010-02-06
关于动态表头的用法，这里有一篇教程可以参考
http://jquery-easyui.wikidot.com/tutorial:datagrid6 |
| 返回顶楼 | |
|
发表时间：2010-02-06
分页是在客户端做的对于企业应用，数据量通常比较大的情况，并不合适。
|
| 返回顶楼 | |
|
发表时间：2010-02-06
demohawk 写道 分页是在客户端做的对于企业应用，数据量通常比较大的情况，并不合适。 分页是在服务端做的。现在的分页都是服务端的分页。 |
| 返回顶楼 | |
|
发表时间：2010-02-07
这套UI不错，在使用linkbutton和dialog后决定，以后就用这套UI了。
就是最好要有详细的教程和例子。 支持楼主写例子教程，谢谢！ |
| 返回顶楼 | |
|
发表时间：2010-02-07
stworthy 写道 关于动态表头的用法，这里有一篇教程可以参考
http://jquery-easyui.wikidot.com/tutorial:datagrid6 受实话这个不老好使的 |
| 返回顶楼 | |
|
发表时间：2010-02-07
最后修改：2010-02-07
楼主，我下载你的源码，好像有问题
1，样式问题： 在firefox 中浏览，tab 页 是圆角效果，在IE中浏览 tab 页 是 矩形角 效果； datagrid 显示的效果，是乱七八糟的，就像一个随意排版的table； 2，数据问题： 点击 设备档案 打开的 datagrid 没有任何数据（数据库都已建好），发现 DeviceController 的index方法没有任何 代码； 请楼主更新 |
| 返回顶楼 | |
|
发表时间：2010-02-07
支持,希望jquery-easyui越来越好
|
| 返回顶楼 | |
|
发表时间：2010-02-07
怎么看怎么像EXT啊
|
| 返回顶楼 | |
