文档章节

EasyUI学习笔记8:MIS开发利器_ datagrid插件(下)(终结篇)

ooad
 ooad
发布于 2015/04/02 16:39
字数 1978
阅读 338
收藏 1
点赞 0
评论 5

一、引言

最后一篇是easyui与struts传递数据。拖了好多天,因为一直没想好怎么写。这部分代码参考了一个开源项目,很早之前写的,具体是哪个我也忘了。例子是easyui+ssh全注解+maven。刚开始笔记想写easyui+ssh+maven完整的,发现内容太多,作为easyui的系列笔记,加上ssh全注解和maven的内容似乎跑题了。

本篇笔记重点介绍如何写action以便于easyui交换数据。其他的部分如感兴趣,可以从我git@osc里面名称为mis项目下载完整代码。项目zip包下载地址为:

http://git.oschina.net/ooad/mis/repository/archive?ref=master

二、SSH必要说明

尽管后台部分本篇不涉及,但是有些内容还是交代一下。

1. 数据库表

示例数据还是之前的客户数据。mysql建表脚本如下:

DROP TABLE IF EXISTS `customer`;
CREATE TABLE `customer` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `CUSTOMERNO` varchar(36) NOT NULL,
  `CUSTOMERNAME` varchar(36) NOT NULL,
  `TELEPHONE` varchar(36) DEFAULT NULL,
  `ADDRESS` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`ID`),
  UNIQUE KEY `CUSTOMERNO` (`CUSTOMERNO`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;

2 实体类

实体类Customer属性必须与easyui中列名称必须相同,否则无法对应。

3. 服务类

Action代码会有调用service层,CustomerService接口名称及作用如下:

添加客户saveCustomer(Customer customer)

修改用户 updateCustomer(Customer customer)

删除用户 deleteCustomer(int id)

列出所有用户并支持分页和排序List<Customer> findAllCustomer(int page, int rows, String sort, String order)

得到客户总数int getTotal() 

4.控制类

控制层代码采用了注解方式,因此项目需要添加struts2-convention-plugin.jar依赖。

三、Action基类

我们必须清楚两个问题:(1) easyui如果要显示后台的数据,必须向action发出请求。因此action需要接收并处理easyui传递过来的参数。(2)easyui只能认识json,所以后台获取的对象或集合必须转换成json格式。这两个问题都需要在action里进行解决。

为了方便编写action,写了一个封装easyui页面参数的action基类BaseAction,并能实现对象转json,其他Action需继承该类。该类代码如下:

public class BaseAction extends ActionSupport{
    protected int page = 1;
    protected int rows = 20;
    protected String sort;
    protected String order;
    protected int id;
    public void writeJson(int total,List list) {
	try {
		Map<String, Object> maps = new HashMap<String, Object>();		
		maps.put("rows", list);
		maps.put("total", total);
		String json = JSON.toJSONString(maps);
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		ServletActionContext.getResponse().getWriter().write(json);
		ServletActionContext.getResponse().getWriter().flush();
	} catch (IOException e) {
		logger.debug(ExceptionUtil.getExceptionMessage(e));
		}
	}
    public void writeJson(Object object) {
	try {			
		String json = JSON.toJSONString(object);
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		ServletActionContext.getResponse().getWriter().write(json);
		ServletActionContext.getResponse().getWriter().flush();
	} catch (IOException e) {
		logger.debug(ExceptionUtil.getExceptionMessage(e));
		}
	//此处省略了setter和getter
}

对该段代码解释:

1. 分页与排序

为了实现分页,action必须接收easyui的两个参数page和rows,page为页数,rows为每页记录数。

但是在数据库进行分页查找操作是需要指定的参数为第一条记录数和最后一条记录数,因此涉及转换问题。

这个转换可以再action层转换,也可以在dao层转换。

本笔记采用后者。这样目的以便让easyui与action交互更为清晰。此处以Hibernate条件查询为例,dao层基类BaseDao处理分页代码为:

criteria.setFirstResult((page-1) * rows);
criteria.setMaxResults(rows);

这样,在Service层查询分页查找客户的方法findAllCustomer(int page, int rows, String sort, String order)直接用这两个参数。

为了实现字段排序,则需接收sort和order两个参数。sort指定排序字段,order指定升降序

方案同前,BaseDao中支持排序代码如下:

if ("asc".equals(order)) {
	criteria.addOrder(Order.asc(sort));
} else {
	criteria.addOrder(Order.desc(sort));
}
}

2 对象转json

对象转json需要用到工具,Struts本身自带一个json插件。本笔记使用了阿里巴巴的fastjson工具,其实用法都差不多,据说fastjson性能强很多。

Fastjson API入口类是com.alibaba.fastjson.JSON,常用的序列化操作都可以在JSON类上的静态方法直接完成。

Api如下:

public static final String toJSONString(Object object); // 将JavaBean序列化为JSON文本 

参考笔记6,要让datagrid显示数据,远程传递或本地读取的json数据格式如下:

{"total": ,"rows":[
{……},
{…....}
]}

需要提醒的是,这里的rows不是前面的每页记录数rows,这是后台向前台传递的。此处rows实际为数据集合,也就是java对象集合转换后的json。easyui为什么非得用一样的名字呢?

所以此处封装了一个writeJson(int total,List list)的方法,子类action中如果需要将List集合转成json在datagrid中显示就调用该方法。

为了提高可用性,本笔记会将后台操作的结果在前台通过消息提示框显示。写了一个向前台传递消息或数据的类(我竟然也照搬命名为Json,晕掉。此Json非彼Json,容易造成误解,应该改成Result,与前篇easyui的代码中的result相呼应),代码如下:

public class Json implements java.io.Serializable {
	private boolean success = false;
	private String msg = "";
	private Object obj = null;
	//此处省略setter和getter
}

因此,基类中还封装了一个writeJson(object)方法可用来将其转换成json。

四、CustomerAction类

代码有点长,如下:

@Controller
@Action(value = "customer", results = { @Result(name = "customer", location = "/page/ /customer.jsp") })
public class CustomerAction extends BaseAction implements ModelDriven<Customer> {
	@Autowired
	private CustomerService customerService;
	public Customer customer = new Customer();
	/**
	 * 得到数据列表
	 */
	public void grid(){
		int total = customerService.getTotal();
		List<Customer> list = customerService.findAllCustomer(page, rows, sort, order);		
		writeJson(total,list);
	}
	/**
	 * 添加操作
	 */
	public void add(){
			Json result = new Json();
			try {
				customerService.saveCustomer(customer);
				result.setSuccess(true);
				result.setMsg("添加客户成功");				
			} catch (Exception e) {
				result.setMsg("添加客户失败");				
			}
			writeJson(result);
	}
	/**
	 * 修改操作
	 */
	public void edit() {
			Json result = new Json();
			try {
				customerService.updateCustomer(customer);
				result.setSuccess(true);
				result.setMsg("修改客户成功");
				result.setSuccess(true);
			} catch (Exception e) {
				result.setMsg("添加客户失败");
			}
			writeJson(result);
	}
	/**
	 * 删除操作
	 */
	public void remove() {
			Json result = new Json();
			try {
				customerService.deleteCustomer(customer.getId());
				result.setSuccess(true);
				result.setMsg("删除客户成功");
			} catch (Exception e) {
				result.setMsg("删除客户失败");
			}
			writeJson(result);
	}
	@Override
	public Customer getModel() {
		return customer;
	}	
}

说明如下:

(1) @Controller注解这是一个action,不需要再写配置文件了。

(2) @Action(value = "customer", results = { @Result(name = "customer", location = "/page/ /customer.jsp") })

这一长串是干嘛的呢?因为没有配置文件了。此处定义action的名字为customer,对应页面为某路径下的customer.jsp。

(3) 客户控制器(CustomerAction) 继承了基类BaseAction,从而可以接收easyui参数并实现json转换。

(4) 该控制器还实现了Struts的ModelDriven这个接口,并覆写了getModel()。以前还真不知道struts还有这个接口,参考之后发现真心好方便。

Action不用去写vo的setter,直接把easyui中的字段值赋值进入了实例化的customer对象中。爽歪歪!

当然前提条件是表单控件名称必须与实体类中的属性名相同,否则..........

(5) 为了在客户端消息提示操作结果,实例化Json(再次恶心下自己,真心命名不好)对象,把消息内容赋值进去,并调用writejson方法转成json在前台显示。

五、customer.jsp

很简单,把前面笔记的customer.html后缀改成jsp,在<html>前面加上下面这一段就可以了:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String contextPath = request.getContextPath();
%>

需要强调的是,使用了注解的action,访问地址有了一些变化,规则为:action名!方法名.action

比如datagrid需要显示数据,需将本地读取url :datagridData.json改成从action中读取,url:customer!grid.action,即调用CustomerAction中的grid()方法得到数据。

grid()实现代码重复下:

public void grid(){
	int total = customerService.getTotal();
	List<Customer> list = customerService.findAllCustomer(page, rows, sort, order);	
	writeJson(total,list);
}

相信看到这,逻辑你已经清楚了。

运行界面和之前没什么变化,只是数据换成了从后台读取。另外,增删改等操作、分页、排序都可以使用了。

© 著作权归作者所有

共有 人打赏支持
ooad
粉丝 93
博文 23
码字总数 17510
作品 0
广州
加载中

评论(5)

Gelbert
Gelbert
protected int page = 1;
protected int rows = 20;
protected String sort;
protected String order;
protected int id;

这里的参数都是前台直接传来的,添加get,set方法就能自动接收了吗?
这里id干啥用的?接收前台传来的用于删除数据的吗?
scaujohn
scaujohn

引用来自“ooad”的评论

或是从git下载完整代码看下
路径没有问题,对比了完整代码后,发现我的jsp页面多了一段新建文件时自动生成的DTD声明,应该是不符合W3C标准,删掉之后就可以正常了,谢谢老师
ooad
ooad
或是从git下载完整代码看下
ooad
ooad
加上完整路径试下
scaujohn
scaujohn
老师,把customer.html的后缀改成jsp是不是有什么别的需要?为什么我在customer.html的url里调用action的grid或者读取本地json都能够正常显示,但是改成jsp文件后却显示不了json里的内容了?
【php增删改查实例】第十四节 - 用户管理模块(起步)

从这一节开始,开始着手开发部门管理模块。 之后的内容就在此基础上进行增加。 1.用户查询 在目录中建立一个user文件夹,作为我们用户管理的模块。 打开这个文件,新建一个userManage.html文...

剽悍一小兔 ⋅ 06/01 ⋅ 0

第七节 - 部门管理模块(画一个datagrid表格)

在easyui中,datagrid组件需要用一个table标签去渲染。 PS: 在easyui的表格组件中,我们唯一要关心的就是 1.提交到什么地址: url 2.显示哪些字段。 比如,ID字段,你需要在th中设置一个fie...

剽悍一小兔 ⋅ 05/11 ⋅ 0

第五节 - easyUI的基本使用

1. 列表组件 datagrid 1.1 创建一个grid.html 1.2 引入easyUI的资源文件 1.3 绘制表格组件 Html: 效果: 1.1 编写后台程序,查询部门数据 在当前文件夹,新建一个dept.php 进行数据库连接测...

剽悍一小兔 ⋅ 05/07 ⋅ 0

JEECG 3.7.5 Vue SPA 单页面应用版本发布

此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板ElementUI风格、Bootstrap分隔,大家速度体验,新鲜出炉,哇咔咔!! JEECG 是一款基...

Jeecg ⋅ 05/31 ⋅ 0

使用easyui的DataGrid实现即时编辑(CRUD)

首先来个users.sql /MySQL Data TransferSource Host: localhostSource Database: mydbTarget Host: localhostTarget Database: mydbDate: 2011/6/3 13:59:12/ SET FOREIGNKEYCHECKS=0; -- T......

styleman ⋅ 05/10 ⋅ 0

jquery easyui tree控件复选框选择处理

------上级状态改变(勾选或取消勾选),所有下级状态跟着改变 ,在tree控件的onCheck事件中实现--------- cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动 onCheck: f...

AIU_GS ⋅ 05/22 ⋅ 0

【php增删改查实例】第十三节 - EasyUI列格式化

因为easyUI的datagrid组件是横着一格一格加载数据的,一行加载好了之后才会去加载下一行。所谓的列格式化,就是在加载某一列的所有单元格时,对即将加载到这些单元格的数据进行二次包装。 比...

剽悍一小兔 ⋅ 06/01 ⋅ 0

第六节 - 部门管理模块(开始)

sql建表语句详见:https://www.jianshu.com/p/c88077ed9073 1.新建html模板 新建一个空白的txt文档,然后把后缀名改为.html 用任意一个编辑器打开,比如sublime,dreamweaver。 2.引入easyu...

剽悍一小兔 ⋅ 05/11 ⋅ 0

EasyUI Combobox中getValue和getText

在组织部项目中使用的Combobox都是通过<input>标签实现的,如下: <input id="checkPlace" class="easyui-combobox" name="checkPlace" data-options="valueField:'id',textField:'text',ur......

霜叶情 ⋅ 04/12 ⋅ 0

基于easyui的文档管理系统springmvc+mybaits实现

开发背景 最近需要开发一个后台项目,想来想去决定使用easyui来做页面处理,于是就先自己做了一个练手的文件管理后台。 2. 架构 架构方面才用srpingmvc+mybaits+maven方式,页面用jsp,数据库...

无小农 ⋅ 06/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

中标麒麟(龙芯版)7.0优盘安装

########################################## 制作U盘安装盘: 1.准备U盘: PMON环境下U盘必须格式化成ext3; 昆仑固件环境下可以格式化成ext3,ext4 2.把整个镜像 xxx.iso 复制到U盘下面 3....

gugudu ⋅ 4分钟前 ⋅ 0

老司机写的大数据建模五步走

本文将尝试来梳理一下数据建模的步骤,以及每一步需要做的工作。 01 第一步:选择模型或自定义模式 这是建模的第一步,我们需要基于业务问题,来决定可以选择哪些可用的模型。 比如,如果要预...

gulf ⋅ 13分钟前 ⋅ 0

PacificA 一致性协议解读

PacificA 的 paper 在 08 年左右发出来的,比 Raft 早了 6,7 年。 在 PacificA 论文中,他们强调该算法使用范围是 LAN (Local Area Network),讲白了就是对跨机房不友好。 不管是 ZAB,Raf...

黑客画家 ⋅ 16分钟前 ⋅ 0

盘符图标个性化

设置自己的专属盘符图标 准备ico格式的图片文件一个,在根目录下创建autorun.inf文件 文件内容 [Autorun]icon=logo.ico 重新启动或者插拔U盘即可看到结果...

阿豪boy ⋅ 16分钟前 ⋅ 0

Windows下QQ聊天记录中图片的默认存放位置

Windows下QQ聊天记录中图片的默认存放位置在设置中是没有说明的。 实测位置在:D:\Documents\Tencent Files\974101467\Image 其中: “974101467”为对应的QQ号; “C2C”为个人之间的聊天图...

临江仙卜算子 ⋅ 22分钟前 ⋅ 0

GC 的三种基本实现方式

参考资料《代码的未来》(作者: [日] 松本行弘)。 由于并非本人原著(我只是个“搬运工“),SO 未经本人允许请尽情转载。 另外个人像说明一下这里所说的GC指泛指垃圾回收机制,而单指Jav...

xixingzhe ⋅ 23分钟前 ⋅ 0

Android双击退出

/** * 菜单、返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-generated method stub if(keyCode......

王先森oO ⋅ 27分钟前 ⋅ 0

idea 整合 vue 启动

刚学习Vue 搭建了一个项目 只能命令启动 Idea里面不会启动 尝试了一下修改启动的配置 如下: 1.首先你要保证你的package.json没有修改过 具体原因没有看 因为我改了这个name的值 就没办法启动...

事儿爹 ⋅ 33分钟前 ⋅ 0

redis在windows环境的后台运行方法

在后台运行,首先需要安装redis服务,命令为 redis-server.exe --service-install redis.windows.conf --loglevel verbose 启动,命令为 redis-server --service-start 停止,命令为 redis-...

程序羊 ⋅ 36分钟前 ⋅ 0

比特币现金开发者提出新的交易订单规则

本周,四位比特币现金的四位开发者和研究员:Joannes Vermorel(Lokad),AmaurySéchet(比特币ABC),Shammah Chancellor(比特币ABC)和Tomas van der Wansem(Bitcrust)共同发表了一篇关...

lpy411 ⋅ 40分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部