etmvc mysql乱码_Eclipse反编译插件JadEclipse-操作系统原理——简单总结-etmvc+jQuery EasyUI使用教程（四）—数据的交互_169IT.COM...

关于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 tmpArgs = new ArrayList();

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 contacts = Contact.findAll(Contact.class, cond, args, "id", rows, (page-1)*rows);//查询通讯的一页资料

//构造JSON用的数据结构并返回JSON视图

Map result = new HashMap();

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 result = new HashMap();

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 result = new HashMap();

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('submi