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代码。

 

评论

19 楼 kjj 2010-01-26  

没前途??? 不敢苟同,ext 你看看 jq 你再看看,flex等ria虽然出来好久了,但是应用并没有展开,flex放互联网上的性能问题至少现在还没看见杀手级解决方案,sliverlight 更面临着跨平台问题,gwt嘛,没觉得有多么火爆!!

18 楼 eserver220 2010-01-25  

 
   Web2 就像java web开发是基于 MVC方式还是组件方式的JSF一样。每个人都在重复发明轮子。应用开发人员在上面投入过多精力实在是无奈。
   
   我不敢小视楼主的实现。 只是觉得web2的开发方式采用javascript的封装方式，似乎没有啥前途。我目前看好的还是flex/silverlight两种技术。

   至于javascript实现嘛，我看国外的echo和国产的longboo是不错的选择。
如果作为一种技术来学习，我会选择GWT。

    一家之言，见笑。

  
 

17 楼 stworthy 2010-01-25  

mayufenga1 写道

form.url="demo/use/update"这个地址不知道从那来的

例子中应该是editUser函数中的语句：form.url = '/demo1/user/update/'+row.id;
作用是存储一个用于更新保存时的URL，这样在saveUser函数中就可以直接引用这个变量。

16 楼 mayufenga1 2010-01-25  

form.url="demo/use/update"这个地址不知道从那来的

15 楼 stworthy 2010-01-25  

tree动态加载时向服务器传递参数是展开节点的id。
基本的DEMO用法已经有了，文档正在编写，暂时放在jquery-easyui.wikidot.com上。
tree的API是少了些，我只是按照最基本的写上去。
大家可以提一些好的需求啊，这样确定出来的API或者会更好些。

14 楼 zlowly 2010-01-24  

其它还好，但tree好像还不太够用，而且没文档。
PS:tree能由自己否定义method的方式，不要固定死post啊。

13 楼 gundumw100 2010-01-24  

老兄，你的http://www.etmvc.cn/project/show/61是不是关了？打不开了

12 楼 andy_zm 2010-01-24  

代码很简练  先收下了...

11 楼 kjj 2010-01-24  

已经有网站了,我错了,等待成型,tree控件的方法太少啊,文档也有待丰富,还有,没看出来那个ajaxtree怎么向服务器传递node的参数,请楼主指教,当前有个项目想用一下easyui

10 楼 kjj 2010-01-24  

界面清新简洁,楼主何不做出个开源的jquery插件提交到jq网站上发布呢!!这样也可以扩大你的影响!!

9 楼 nishijia 2010-01-24  

LZ的 tree组件 为什么节点上只有onClick一个方法  能否加个 onDblClick 呢

8 楼 happysoul 2010-01-23  

引入代码相比Ext是小了不少，不过估计是在功能上相差的部分表现出来的
一直再考虑是否用Ext做客户端的东西 后来觉得应该放弃这想法
毕竟网络垃圾的。。。下载JS的东西要等...等...等...
再就是和框架整合也是个问题
不过楼主的demo看上去还是不错的

7 楼 wdpyyxal 2010-01-23  

程序员是有的学啊！

6 楼 huangxiang 2010-01-23  

简单学习一下，现在EXT很火啊

5 楼 jingrenlang 2010-01-23  

一直都在等待成型····

4 楼 lucky16 2010-01-23  

确实很不错的东西阿!我也先收下了

3 楼 dieslrae 2010-01-22  

代码很像ext的组织方式

2 楼 anone 2010-01-21  

赞一个，楼主的jquery布局插件已经用在项目中，tabs插件还有问题，不能动态添加url的内容，所以没有使用，现在这个更是强大了，收下先...3Q

1 楼 andybrier3 2010-01-21  

Thanks!