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)" οnclick="saveUser()" id="btn-save" icon="icon-save">保存</a>
			<a href="javascript:void(0)" οnclick="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代碼。