etmvc+jQuery EasyUI使用教程（四）—数据的交互

关于etmvc+jQuery EasyUI使用教程距离上次更新已经有一个多月了，其实这项目早已经做完了，只是一直没时间更新，今天抽空把里面的一小部分作为例子抽出来讲讲。上篇教程讲到接下来我们会进入JQuery easyUI，但可能是我本人水平有限，关于JQuery easyUI的入门个人感觉还不如建议大家直接去看官方的开发文档来得快，所以在这里打算跳过jQuery EasyUI入门，直接就一个具体的使用例子来讲了一下jQuery EasyUI和etmvc的配合使用，不过关于JQuery easyUI具体控件使用还是建议大家去看一看JQuery easyUI官方的开发文档。下面我们开始。

1、首先你当然是要下载jQuery EasyUI，下载地址：http://www.jeasyui.com/download/index.php ，注意新旧版本有些用法是不大一样的，建议版本不要过旧，选个网上开发文档比较全的版本最好，我这用了一个1.3的版本。

2、在eclipse新建一个Dynamic Web Project项目，把下载回来的压缩包解压之后搁到项目的WebContent目录下，可以删掉里面的demo文件夹，按照我之间的教程配置好etmvc框架，包括数据库的配置。

3、在MySql数据库新建一个表并且追加几条记录：

/*
Navicat MySQL Data Transfer
Source Host     : localhost:3306
Source Database : ciccpsmember
Target Host     : localhost:3306
Target Database : ciccpsmember
Date: 2012-12-10 02:17:51
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for contacts
-- ----------------------------
DROP TABLE IF EXISTS `contacts`;
CREATE TABLE `contacts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `department` varchar(50) DEFAULT NULL,
  `position` varchar(50) DEFAULT NULL,
  `tel` varchar(20) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `fax` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of contacts
-- ----------------------------
INSERT INTO `contacts` VALUES ('1', '张三', '男', '信息部', '高级专员', '84547718-8053', 'zhangsan@ciccps.org', '18812345678', '84547718');
INSERT INTO `contacts` VALUES ('2', '李四', '女', '会员部', '秘书', '84547718-8052', 'lisi@ciccps.org', '18812345678', '84547718');
INSERT INTO `contacts` VALUES ('3', '王五', '男', '信息部', '高级专员', '010-84547718-8052', 'wangwu@ciccps.org', '13812345231', '010-84547718');
INSERT INTO `contacts` VALUES ('4', '刘六', '男', '信息部', '高级专员', '010-84547718-8052', 'liuliu@ciccps.org', '13488780443', '010-84547718');

4、在项目src目录下的models包建立数据库contact表对应的域对象Contact.java：

package models;

import com.et.ar.*;
import com.et.ar.annotations.*;

@Table(name = "contacts")
public class Contact extends ActiveRecordBase {
	@Id
	private Integer id;
	@Column
	private String name;
	@Column
	private String gender;
	@Column
	private String department;
	@Column
	private String position;
	@Column
	private String tel;
	@Column
	private String email;
	@Column
	private String phone;
	@Column
	private String fax;
	
	//设置 get,set...
	
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getGender() {
		return gender;
	}
	public void setGender(String gender) {
		this.gender = gender;
	}
	public String getDepartment() {
		return department;
	}
	public void setDepartment(String department) {
		this.department = department;
	}
	public String getPosition() {
		return position;
	}
	public void setPosition(String position) {
		this.position = position;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getFax() {
		return fax;
	}
	public void setFax(String fax) {
		this.fax = fax;
	}
	

}

5、在项目src目录下的controllers包建立对应的控制器ContactController.java，主要用于对数据库contact表的增删改查：

package controllers;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import models.Contact;

import com.et.mvc.JsonView;

public class ContactController extends ApplicationController{

	
	/**
	 * 通讯录列表页面
	 */
	public void index(){
		
	}
	
	/**
	 * 查询通讯记录，分页查询
	 * @param rows 分页大小
	 * @param page	页号
	 * @param department	查询参数-按部门名称查询
	 * @param name	查询参数-按人名称查询
	 * @return 返回通讯录的分页数据资料
	 * @throws Exception
	 */
	public JsonView getContacts(int rows, int page,
			String department,
			String name
			) throws Exception {
		
		String cond = "1=1";
		List<Object> tmpArgs = new ArrayList<Object>();
		if (department != null && !department.equals("")) {	//部门名称参数非空时增加编码查询条件
			cond += " and department like ?";
			tmpArgs.add("%" + department + "%");
		}
		if (name != null && !name.equals("")) {	//名称参数非空时增加名称查询条件
			cond += " and name like ?";
			tmpArgs.add("%" + name + "%");
		}
		Object[] args = tmpArgs.toArray();
		
		long total = Contact.count(Contact.class, cond, args);	//查询通讯录总数量
		List<Contact> contacts = Contact.findAll(Contact.class, cond, args, "id", rows, (page-1)*rows);	//查询通讯的一页资料
		
		//构造JSON用的数据结构并返回JSON视图
		Map<String, Object> result = new HashMap<String, Object>();
		result.put("total", total);
		result.put("rows", contacts);
		return new JsonView(result);
	}
	
	/**
	 * 取得指定的事件信息
	 */
	public JsonView getContactById(Integer id) throws Exception{
		Contact contact = Contact.find(Contact.class, id);
		return new JsonView(contact);
	}
	
	public long getContactByName(String name) throws Exception{
		long count = Contact.count(Contact.class, "name = ?", new Object[]{name}); 
		return count;
	}
	/**
	 * 保存新建通讯记录
	 */
	public JsonView save(Contact contact) throws Exception {
		Map<String,Object> result = new HashMap<String,Object>();
		if (getContactByName(contact.getName())>0){
			result.put("failure", true);
			result.put("msg", "该用户已经存在。");
		} else {
			result.put("success", true);
			contact.save();
		}
		JsonView view = new JsonView(result);
		view.setContentType("text/html;charset=utf-8");
		return view;
	}
	
	/**
	 * 保存修改的通讯记录
	 */
	public JsonView update(Integer id) throws Exception{		
		Map<String,Object> result = new HashMap<String,Object>();
		Contact contact = Contact.find(Contact.class, id);
		updateModel(contact);
		if(contact.save())
		{
			result.put("success", true);
		}
		else
		{
			result.put("failure", true);
			result.put("msg", "服务器繁忙，请稍后再试！");
		}
		JsonView view = new JsonView(result);
		view.setContentType("text/html;charset=utf-8");
		return view;
	}

	/**
	 * 删除指定的通讯记录
	 */
	public JsonView destroy(Integer id) throws Exception {
		Contact contact = Contact.find(Contact.class, id);
		contact.destroy();
		return new JsonView("success:true");
	}
}

6、在WebContent下新建一个JS的目录，在里面新建一个contact.js的脚本文件，主要是用于对页面的数据进行操作，包括数据的显示，增加修改和删除（其中查找功能没有在这里实现）：

$(function(){
	grid = $('#tt').datagrid({
		pageSize:15,
		pageList:[15,30,60,90],
		fit: true,//自动大小  
        rownumbers:true,//行号 
		url:'/demo/contact/getContacts',
		//loadMsg:'数据装载中......',  
		singleSelect:true,//单行选取
		pagination:true,//显示分页
		toolbar:[{
			text:'新增',
			iconCls:'icon-add',
			handler:newContact
		},'-',{
			text:'修改',
			iconCls:'icon-edit',
			handler:editContact
		},'-',{
			text:'删除',
			iconCls:'icon-remove',
			handler:delContact
		},'-',{
			text:'查询',
			iconCls:'icon-search'
		}]
	});
	//设置分页控件 
    var p = grid.datagrid('getPager'); 
    $(p).pagination({ 
        pageSize: 15,//每页显示的记录条数，默认为10 
        pageList: [15,30,60,90],//可以设置每页记录条数的列表 
        //beforePageText: '第',//页数文本框前显示的汉字 
        //afterPageText: '页    共 {pages} 页', 
        //displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录', 
    }); 
	$('#btn-save,#btn-cancel').linkbutton();
	win = $('#contact-window').window({
		closed:true
	});
	form = win.find('form');
});

var grid;
var win;
var form;

function newContact(){
	win.window('open');
	form.form('clear');
	form.url = '/demo/contact/save';
}
function editContact(){
	var row = grid.datagrid('getSelected');
	if (row){
		win.window('open');
		form.form('load',row);
		form.url = '/demo/contact/update/'+row.id;
	} else {
		$.messager.show({
			title:'警告', 
			msg:'请先选择通讯记录。'
		});
	}
}

function saveContact(){
	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 delContact(){
	var row = grid.datagrid('getSelected');
	if (row){
		$.messager.confirm('Confirm', '您确定要删除该数据吗?', function(r) {
            if (r){
             $.post('/demo/contact/destroy', { id: row.id }, 
                    function(result) {
                      if (result.success) {
                    	  grid.datagrid('reload');
                        } else {
                            $.message.show({
                                title: 'Error',
                                msg: result.msg
                            });
                        }
                    },
                  'json');
            }
        });
	} else {
		$.messager.show({
			title:'警告', 
			msg:'请先选择通讯记录。'
		});
	}
}
function closeWindow(){
	win.window('close');
}

7、在WebContent下的视图目录views下添加一个名为contact的目录，用于对应ContactController，然后在里面添加一个index.jsp作为contact的视图：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>demo会员管理系统</title>
    <link rel="stylesheet" href="/demo/easyui/themes/default/easyui.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/demo/easyui/themes/icon.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/demo/css/main.css" type="text/css" media="screen" />
    <script src="/demo/easyui/jquery-1.7.2.min.js"></script>
    <script src="/demo/easyui/jquery.easyui.min.js"></script>
    <script src="/demo/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="/demo/js/contact.js"></script>
	<script type="text/javascript" src="/demo/js/myValid.js"></script>
	<style type="text/css">
		input,textarea{
			width:200px;
			border:1px solid #ccc;
			padding:2px;
		}
	</style>
</head>
<body class="easyui-layout">
<div region="center" style="padding:5px;" border="false">
	<table id="tt" fit="true">
		<thead>
			<tr>
				<th field="id" width="50">编号</th>
				<th field="name" width="80">姓名</th>
				<th field="gender" width="50">性别</th>
				<th field="department" width="80" >部门</th>
				<th field="position" width="100">职务</th>
				<th field="tel" width="120">办公电话</th>
				<th field="email" width="150">电子邮箱</th>
				<th field="phone" width="80">移动电话</th>
				<th field="fax" width="100">办公传真</th>
			</tr>
		</thead>
	</table>
	<div id="contact-window" title="通讯信息" iconCls="icon-edit" modal="true" maximizable="false" minimizable="false" style="background:#fafafa;width:400px;height:350px;">
		<div style="padding:20px 20px 40px 60px;">
			<form method="post">
			<table>
					<tr>
						<td>姓名：
						</td>
						<td><input name="name" class="easyui-validatebox" data-options="required:true,validType:'length[2,10]'"></input>  
						</td>
					</tr>
					<tr>
						<td>性别：
						</td>
						<td><select class="easyui-combobox" name="gender" style="width:200px;" data-options="editable:false,required:true,validType:'length[1,1]'">
								<option value="男" selected>男</option>
								<option value="女">女</option>
							</select> 
						</td>
					</tr>
					<tr>
						<td>部门：
						</td>
						<td><input name="department" class="easyui-validatebox" data-options="required:true,validType:'length[2,15]'"></input>
						</td>
					</tr>
					<tr>
						<td>职务：
						</td>
						<td><input name="position" class="easyui-validatebox" data-options="required:true,validType:'length[2,15]'"></input>
						</td>
					</tr>
					<tr>
						<td>办公电话：
						</td>
						<td><input name="tel" class="easyui-validatebox" data-options="required:true,validType:'tel'"></input>
						</td>
					</tr>
					<tr>
						<td>电子邮箱：
						</td>
						<td><input name="email" class="easyui-validatebox" data-options="validType:'email'"></input>
						</td>
					</tr>
					<tr>
						<td>移动电话：
						</td>
						<td><input name="phone" class="easyui-validatebox" data-options="validType:'mobile'" ></input>
						</td>
					</tr>
					<tr>
						<td>办公传真：
						</td>
						<td><input name="fax" class="easyui-validatebox" data-options="validType:'tel'"></input>
						</td>
					</tr>	
				</table>
			</form>
		</div>
		<div style="text-align:center;padding:5px;">
			<a href="javascript:void(0)" οnclick="saveContact()" id="btn-save" icon="icon-save">保存</a>
			<a href="javascript:void(0)" οnclick="closeWindow()" id="btn-cancel" icon="icon-cancel">取消</a>
		</div>
	</div>
</div>
</body>
</html>

8、最后来看看效果图：

是不是很简单呢？其中那个contact.js脚本是精髓，是它负责与后端ContactController打交道，并把数据展示出来，它和后端所有的数据交互都是以json格式进行传送，而ContactController又依赖于Contact域模型对象对数据库进行存储访问。今天就写到这！