- 浏览: 522688 次
- 来自: ...
最新评论
-
alick24:
不能下载呢
基于easyui的仓库管理系统 -
eddie_lau:
...
基于easyui的仓库管理系统 -
zxygww:
非常强大的项目,可以直接运行
基于easyui的仓库管理系统 -
big3333:
表格是合并了,但是序号没有合并,有没有办法处理序号合并,翻页b ...
在datagrid的表格体中合并单元格 -
nacco:
有没有一个默认的Controller?用www.xxx.com ...
利用etmvc再来写个小例子
利用easyui编写一个用户管理小例子,目的是演示CRUD操作。先看一下效果图:
1、表格的定义:
<table id="user-table"> <thead> <tr> <th field="name" width="100">名称</th> <th field="phone" width="100">电话</th> <th field="addr" width="100">地址</th> <th field="duty" width="100">职务</th> </tr> </thead> </table>
利用表格的THEAD来定义列,field属性对应用户数据模型的字段名称。
接着用jQuery创建表格,同时创建一个操作工具栏:
grid = $('#user-table').datagrid({ url:'/demo1/user/getUsers', title:'用户资料', width:600, height:300, singleSelect:true, toolbar:[{ text:'新增', iconCls:'icon-add', handler:newUser },'-',{ text:'修改', iconCls:'icon-edit', handler:editUser },'-',{ text:'删除', iconCls:'icon-remove' }] });
2、定义用户信息窗口和表单
<div id="user-window" title="用户窗口" style="width:400px;height:250px;"> <div style="padding:20px 20px 40px 80px;"> <form method="post"> <table> <tr> <td>名称:</td> <td><input name="name"></input></td> </tr> <tr> <td>电话:</td> <td><input name="phone"></input></td> </tr> <tr> <td>地址:</td> <td><input name="addr"></input></td> </tr> <tr> <td>职务:</td> <td><input name="duty"></input></td> </tr> </table> </form> </div> <div style="text-align:center;padding:5px;"> <a href="javascript:void(0)" onclick="saveUser()" id="btn-save" icon="icon-save">保存</a> <a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" icon="icon-cancel">取消</a> </div> </div>
可以看到,窗口是一个DIV,表单是一个FORM,这种创建方式具有极大的灵活性,不需要学习成本,创建的jQuery代码如下:
$('#btn-save,#btn-cancel').linkbutton(); win = $('#user-window').window({ closed:true }); form = win.find('form');
其中建立了窗口的操作按钮,并获取表单对象。
3、进行CRUD操作的客户端代码:
function newUser(){ win.window('open'); form.form('clear'); form.url = '/demo1/user/save'; } function editUser(){ var row = grid.datagrid('getSelected'); if (row){ win.window('open'); form.form('load', '/demo1/user/getUser/'+row.id); form.url = '/demo1/user/update/'+row.id; } else { $.messager.show({ title:'警告', msg:'请先选择用户资料。' }); } } function saveUser(){ form.form('submit', { url:form.url, success:function(data){ eval('data='+data); if (data.success){ grid.datagrid('reload'); win.window('close'); } else { $.messager.alert('错误',data.msg,'error'); } } }); } function closeWindow(){ win.window('close'); }
例子中使用etmvc框架来处理后台的数据,演示例子中不使用数据库。
定义用户数据模型:
public class User { public Integer id; public String name; public String phone; public String addr; public String duty; public User clone(){ User u = new User(); u.id = id; u.name = name; u.phone = phone; u.addr = addr; u.duty = duty; return u; } }
定义后台用户的CRUD操作:
public class UserController extends ApplicationController{ /** * 返回全部用户资料 */ public View getUsers() throws Exception{ Map<String,Object> result = new HashMap<String,Object>(); result.put("total", users.size()); result.put("rows", users); return new JsonView(result); } /** * 取得指定的用户资料 */ public View getUser(Integer id) throws Exception{ User user = users.get(id-1); return new JsonView(user); } /** * 保存用户资料,这里对用户名称进行非空检验,仅供演示用 */ public View save(User user) throws Exception{ Map<String,Object> result = new HashMap<String,Object>(); if (user.name.length() == 0){ result.put("failure", true); result.put("msg", "用户名称必须填写。"); } else { result.put("success", true); user.id = users.size()+1; users.add(user); } View view = new JsonView(result); view.setContentType("text/html;charset=utf-8"); return view; } /** * 更新指定的用户资料 */ public View update(Integer id) throws Exception{ Map<String,Object> result = new HashMap<String,Object>(); User user = users.get(id-1).clone(); updateModel(user); if (user.name.length() == 0){ result.put("failure", true); result.put("msg", "用户名称必须填写。"); } else { result.put("success", true); user.id = id; users.set(id-1, user); } View view = new JsonView(result); view.setContentType("text/html;charset=utf-8"); return view; } // 用户资料测试数据 private static List<User> users = new ArrayList<User>(); static{ for(int i=1; i<10; i++){ User user = new User(); user.id = i; user.name = "name" + i; user.phone = "phone" + i; user.addr = "addr" + i; user.duty = "duty" + i; users.add(user); } } }
完整的代码请见附件,可以看到,easyui具有极少的JS代码。
评论
39 楼
newposte
2012-05-08
请问楼主:jquery easyui 中怎么使用复选框啊?比如说:给某个用户分配角色的时候,角色信息往往用checkbox来实现,而用jquery easyui怎么实现?
38 楼
wwjjkk
2011-07-04
附件里view文件夹是空的啊,木有页面哦
37 楼
土豆o
2010-12-20
像这种表单,我用djfocus一分钟不到就可以做出来。
36 楼
zhsjie
2010-08-12
我觉得对于button还有改进的余地(实现返回后自动刷新),看看我可否实现
35 楼
arong
2010-06-14
最近参考搂主的例子收获不小,又碰到一个疑问,如在编辑时,form(load)填充表单时,如果表单有域的属性为关联对象的,名称如:<html:text property="productType.prodType"/>无法自动填充。我生成的JSON如: {"createtime":"2008-07-13","id":8,"model":"LC-17H2 06","productType":{"id":1,"prodType":"车载显示器"}}。对象关系如产品类别和产品:ProductType,Product。mvc用的是struts1.
34 楼
stworthy
2010-06-10
删除时获取选中行的ID,AJAX到后台进行删除,然后刷新表格数据。
33 楼
arong
2010-06-09
请问搂主,删除事件如何提交?
32 楼
madbird
2010-03-26
非常感谢分享~~~
31 楼
stworthy
2010-03-12
不需要,同etmvc没任何关系。
30 楼
winter8
2010-03-11
楼主,一个问题困惑我好久了,是不是jquery easyui必须与etmvc框架一起用,如果我要用其它框架行不行?
29 楼
mx122723
2010-03-09
很好用吗??
28 楼
stworthy
2010-03-08
这个是AJAX的缓存,可以加上这一句来防止:
$.ajaxSetup ({
cache: false //关闭AJAX相应的缓存
});
$.ajaxSetup ({
cache: false //关闭AJAX相应的缓存
});
27 楼
andybrier3
2010-03-08
报告一个bug:
用户管理小例子demo1有个bug:修改用户的一个属性之后(比如说职务),刷新页面,表格上的内容变了,但是点击刚刚修改的数据,选择修改,form中还是显示修改前的数据。
用户管理小例子demo1有个bug:修改用户的一个属性之后(比如说职务),刷新页面,表格上的内容变了,但是点击刚刚修改的数据,选择修改,form中还是显示修改前的数据。
26 楼
congpeixue
2010-03-04
congpeixue 写道
我用在自己的小项目中了,, 下次拷贝些图上来,, 谢谢stworthy
决定不再使用了。 不开源。
25 楼
sogo1986
2010-02-26
有rails的意思,配置几乎是0,非常好 支持LZ
希望多集成spring,如果能加上freemarker做渲染或者代码生成器就完美了
希望多集成spring,如果能加上freemarker做渲染或者代码生成器就完美了
24 楼
congpeixue
2010-02-08
我用在自己的小项目中了,, 下次拷贝些图上来,, 谢谢stworthy
23 楼
stworthy
2010-02-05
新范例已经更新发布。
22 楼
fege
2010-02-05
该demo的jquery.easyui.min.js应用到 机电设备管理系统 首页面出错了,报jquery.easyui.min.js的错误,求有什么版本的jquery.easyui.min.js能兼容这两个demo。
21 楼
j9dai
2010-02-04
看起来不错
但怎么编译布署啊
我的环境是jdk6+eclipse3.2+myeclipse6.5+jboss4.2
导入项目报错:
Target runtime Apache Tomcat v6.0 is not defined.
怎么解决啊?
是不是一定要装Tomcat v6.0啊
但怎么编译布署啊
我的环境是jdk6+eclipse3.2+myeclipse6.5+jboss4.2
导入项目报错:
Target runtime Apache Tomcat v6.0 is not defined.
怎么解决啊?
是不是一定要装Tomcat v6.0啊
20 楼
vinsonlou
2010-01-29
翻页在ie下面有点慢
发表评论
-
在easyui中利用DataGrid的行明细区域实现CRUD操作
2011-06-20 17:42 13547在easyui中,DataGrid可以通过detailview ... -
在easyui中展开DataGrid的行,显示明细数据
2011-06-20 17:24 40506easyui中的DataGrid可以切换不同的视图,当使用de ... -
在EasyUI中创建分组属性编辑器
2011-05-05 11:53 9323属性编辑器propertygrid支持分组显示,创建的时候可以 ... -
采用EasyUI制作入库单操作界面
2011-04-12 11:51 15100采用EasyUI可以方便制作入库单的操作界面,先看看图: 1 ... -
datagrid中使用合计行
2010-12-23 16:28 8783datagrid中可以使用合计行显示汇总信息,合计行可以是多行 ... -
jquery-easyui中自定义DataGrid的视图
2010-10-21 14:25 19935在DataGrid中自定义视图可以帮助我们做各种个性化的显示方 ... -
利用TreeGrid做简单数据报表
2010-09-02 10:46 6188jquery-easyui中的TreeGrid继承DataGr ... -
jquery-easyui中自定义下拉框列表项格式
2010-08-24 15:27 10334下拉框的列表项一般为一行文本,但实际上可以是任何HTML,所以 ... -
在datagrid的表格体中合并单元格
2010-07-08 11:22 5530jquery-easyui的datagrid具有创建复杂表头和 ... -
jquery-easyui中表格的行编辑功能
2010-06-10 17:21 97497datagrid现在具有行编辑能力了,使用时只须在column ... -
jquery-easyui中实现课程表拖放效果
2010-05-28 09:17 7597利用jQuery EasyUI可以很容易就实现学校课程表的拖放 ... -
jquery-easyui中创建带复选框的树
2010-05-24 18:24 8174easyui可以创建带复选框的树,只要带上选项checkbox ... -
jquery-easyui的拖放购物车范例
2010-05-24 11:58 6326利用easyui的拖放能力可以轻松创建购物车,看一个例子: ... -
jquery-easyui中的表单验证
2010-03-22 17:55 10016jQuery EasyUI中进行表单验证主要是通过valida ... -
jquery-easyui中添加树节点
2010-03-08 12:17 4972jquery-easyui中的树具备基本的CRUD能力,添加节 ... -
jquery-easyui中创建复杂的布局效果
2010-02-24 17:42 11290jquery-easyui中利用panel, layout等插 ... -
基于jquery-easyui的机电设备管理系统布局新范例
2010-02-05 14:53 10869使用jquery-easyui的新版本 ... -
jquery-easyui中为datagrid加入分页功能
2010-02-01 16:44 19828jquery-easyui中使用datagrid来加载远程数据 ... -
jquery-easyui中轻松转换html table
2010-01-31 11:02 6068jquery-easyui中将html table转换成dat ... -
jquery-easyui中创建Window窗口
2010-01-30 11:07 32150jquery-easyui中创建窗口很简单,建立一个DIV就行 ...
相关推荐
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jquery-easyui-1.7.0 官方文档以及源码,演示demo,内容详细
jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI...jQuery-Easyui-1.2.6中含有jQuery库、easyui库、demo实例和jquery_easyui_中文帮助文档等。
easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui...
jquery-easyui完整demo演示
基于jquery-easyui的用户管理系统实例,包括菜单栏以及数据得增删查改及sql语句
jquery-easyui-1.2 版本 同时包含各种例子:datagrid,tree
教程名称:超实用的jQuery-EasyUI视频教程(30集)课程目录:【】jQuery-EasyUI视频教程(01-02集)【】jQuery-EasyUI视频教程(03-04集)【】jQuery-EasyUI视频教程(05-06集)【】jQuery-EasyUI视频教程(07-08集...
Jquery-Easyui-1.2.3以及帮助文档
jquery-easyui的官方主题包,包括metro五套和ui四套
该资源为jquery-easyui-1.5.5版本,包含easyui插件所依赖的js和css
jQuery EasyUI jquery-easyui-1.5.5.6 版 API 中文版 PDF和chm版本,jQuery
jquery-easyui-themes,easyui主题包,包含metro-blue metro-gray metro-green metro-orange metro-red ui-cupertino ui-dark-hive ui-pepper-grinder ui-sunny这些主题,具体的php使用方式见:...
jquery-easyui-1.4.4包含css和js 及一些案例,easyui1.4.4
jquery-easyui-1.3.5打包下载
jquery-easyui-1.3.3
jquery-easyui-1.5.3
jquery-easyui-1.5版本,自带demo可以随时查看,并且包含easyui主要js
jquery-easyui-1.3.1,兼容IE7.0