jquery-easyui编写用户管理小例子

利用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相应的缓存
});

27 楼 andybrier3 2010-03-08  

报告一个bug：
用户管理小例子demo1有个bug：修改用户的一个属性之后（比如说职务），刷新页面，表格上的内容变了，但是点击刚刚修改的数据，选择修改，form中还是显示修改前的数据。

26 楼 congpeixue 2010-03-04  

congpeixue 写道

我用在自己的小项目中了，， 下次拷贝些图上来，， 谢谢stworthy

决定不再使用了。 不开源。

25 楼 sogo1986 2010-02-26  

有rails的意思，配置几乎是0，非常好 支持LZ
希望多集成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啊

20 楼 vinsonlou 2010-01-29  

翻页在ie下面有点慢