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

 

Thanks!

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

代码很像ext的组织方式

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

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

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

程序员是有的学啊！

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

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