本文讲述了作者如何使用EasyUI、Spring MVC和Hibernate实现基本的增删改查功能，以及Excel的导入导出。通过分析项目结构，作者了解了基于Spring、Hibernate、EasyUI和MySQL的框架，并利用zTree实现树菜单，使用POI处理Excel读写。此外，文章还涉及前端与后台的数据交互、分页查询、动态验证等技术细节。
(这是一个故事……)前言
作为一个JAVA开发工程师，我觉得最基本是需要懂前端、后台以及数据库。
练习的内容很基础，包括：基本增删改查、模糊查询、分页查询、树菜单、上传下载、tab页
主管发我一个已经搭建好的框架平台，在平台上进行编码，不限制技术。
虽然说不限制技术，但还是得根据已经搭建的框架平台进行编码。
所以首先第一步，分析框架平台结构组成。
入手：看目录、看配置、看jar包、看js库、看数据库...
不难发现项目是基于：Spring + Hibernate + Spring MVC + EasyUI + MySQL
除了基本框架外，完成我需要的功能，平台还提供了如下Java类库和JS插件：
zTree：树菜单
POI：Excel读写
需求不难，可是对于Spring MVC和EasyUI，我算是第一次使用。
我之前用过Struts2和DWZ。这次Spring MVC替代了Strut2、EasyUI替代了DWZ。
我觉得曾经接触过类似东西的话，再学同类型的就会容易上手。所以我对我自己有信心。当要完成一个完整的功能的时候，我3/4的时间花在了前端数据展示和前端后台数据交互上。
大部分细节的问题，都需要前端的处理，同时也需要后台的配合。
做项目绝对不能盲目开始，必须先掌握基本的理论知识。首先展示一下效果：
EasyUI
它做出来的应用是一个富客户端。
大概的特点是：所有资源文件只加载一次，页面局部刷新，所有请求都基于ajax请求，所有打开的tab页在同一个浏览器窗口算是同一个页面，这个就要注意当通过id(在同一个页面应该是唯一的)或者name(如果同一个页面存在相同的name)获取页面元素的值时的问题。
树菜单
这是个4级菜单，在一个表中，每一行数据含有以上4个列。根据Hibernate一个实体bean对应一个表的思想，这4列就是bean的4个属性。在整个功能需求中，都是对单表进行操作。
菜单要求的层级关系为：所属城市 =》 设备类型 =》 设备型号 =》 设备名，即对一个设备进行分类显示。
对于树菜单，现成的插件有EasyUI自带的插件和zTree。因为我之前有接触过zTree，但还没用过EasyUI的树菜单插件，所以我用zTree实现这一功能。(我加入了zTree的技术交流群(1806431)，群老大就是写zTree插件的人，他告诉我，基于EasyUI开发的话，其实用EasyUI自带树菜单插件更好，而且它自身的树菜单功能强大，整合得更好。后续会学习，暂时是用zTree实现了)
zTree支持两种格式的JSON数据：
平台提供了一个zTree的实体bean。
上面的属性跟zTree的插件本身定义的属性是一一对应的，这样可以方便转换成JSON之后直接生成树菜单，而无须重新指定属性。
需要注意的是：url赋的值默认就是在zTree的树菜单中的a标签的href的值。在EasyUI中，当点击菜单节点，会打开一个新的浏览器窗口，这肯定是不符合要求的。API中如下说明，可以重新指向属性，其他重新指向属性原理相同，具体查看API。
Spring MVC返回JSON需要添加@ResponseBody注解
根据我的bean生成的JSON为标准JSON格式，可以直接使用(我一开始还傻傻的将它拆来拼成简单格式的JSON，后来发现傻了~)
我指定当节点被点击时执行onClick()函数
至于JAVA，首先不知道好不好，但还是实现了，分享一下我的思路：
1、从数据库获取所有的设备信息
2、遍历将设备信息按城市分类
3、遍历Map，将List传入添加子结点
4、同理先分类，再将List传入进行下一级分类，最后得到的就是一个树结构
这功能，第一次也是大概这样的思路，但是查数据库实现分类的，结果查了N次数据库，那肯定是不行的，然后就改成了这样只查一次数据库，再遍历处理数据。虽然写得不是很好，但功能是实现了。期待更好的思路~
查询
查询包括了模糊查询和分页查询
新手做这个功能的时候都是一步一步慢慢演变成完整功能的。(过程略……)
为了确保查询条件的不变，我需要设置一个隐藏的表单，存储查询条件，当点击分页工具栏的按钮时，获取隐藏表单的数据作为分页条件，进行分页查询。所以当我们点击查询按钮的时候，实际上先将表单中的数据赋值到隐藏表单中，然后触发分页查询。通过$('#dTable').datagrid('reload');即可以重新加载表格。
EasyUI获取下拉或者日期控件的值需要采用控件的方法去获取
在EasyUI中，每一个控件都含有属性，事件和方法。
大概用法是：
$("#id").控件名('方法名', {
属性名：属性值,
事件名：function(){
}
});
具体的查看API
新增和修改
这个看似两个功能，但传到后台java处理是对应同一个处理。对应的是saveOrUpdate方法。
hibernate中提供了saveOrUpdate方法实现保存或更新操作。
saveOrUpdate方法：如果设置了主键则执行update操作，如果主键为null(null和“”是有区别的，jsp获取到的空值为""，我们需要将其置为null)则执行inset操作。
至于前端页面，肯定打开的是同一个窗口，但是点击【新增】和【更新】按钮时需要修改窗口内的相应值，最后获取值通过Ajax提交即可。
删除
删除和新增、跟新都需要为方法添加事务注解，否则运行不报错，但数据库数据死活不变
到这里，应该注意到，新增、修改、删除都对设备信息造成影响，那么我们应该重新获取菜单和表格的数据，同时下拉框(我的下拉选项是当前存在在数据库的分类)的数据也要相应变化。导入/上传
那个上传的地址后面有个/，我搞了半天上传不了，结果是少了一个/
基本都是固定的
导出/下载
Spring MVC的下载也是相对固定的，最后返回的是一个byte数组，只要将需要下载的内容转换为byte数组，就可以实现下载。
简单地通过window.open就可以打开下载的窗口
但当我通过window.open传递中文时，出现乱码，经查阅资料，可以用过encodeURL编码url，然后在JAVA再通过URLDecoder.decode解码即可解决中文乱码问题
POI读写
主要就基本步骤：
1、创建Excel工作簿：Workbook
2、在Workbook创建工作表Sheet
3、在Sheet创建行Row
4、在行Row创建单元格Cell
对于Excel，POI有三个实现了Workbook接口的对象，分别是：
HSSFWorkbook：主要用于创建2003版格式的Excel，文件后缀为.xls，数据量大会报错
XSSFWorkbook：主要用于创建2007版格式的Excel，文件后缀为.xlsx，对于数据量大需要使用此类
SXSSFWorkbook：扩展了XSSFWorkbook，提高了性能
这样就可以生成baye数组
远程验证
有资料显示使用data-options的方法设置远程验证，结果出现单双引号混合使用的情况，导致不能正确执行，不知道有没有解，然后我就用了上面这种方式写，没问题
动态启动禁用验证
$("#wid").removeAttr("readonly");$('#wid').validatebox('reduce'); // 恢复
$("#wid").attr("readonly","readonly");// ID列不能改$('#wid').validatebox('remove');// 删除
/* 动态禁用启用验证 */
$.extend($.fn.validatebox.methods, {
remove : function(jq, newposition) {
return jq.each(function() {
$(this).removeClass("validatebox-text validatebox-invalid").unbind(
'focus').unbind('blur');
});
},
reduce : function(jq, newposition) {
return jq.each(function() {
var opt = $(this).data().validatebox.options;
$(this).addClass("validatebox-text").validatebox(opt);
});
}EasyUI1.3.6 TextBox
首先非常感谢 潇洒一剑 一丝不苟的态度，从图片中就看出了我的问题，并慷慨的为我指出。
首先症状就是如图，这两个文本框的边框跟其他控件的不一致。
但是呀，我的确是按照网上的设置做的了呀，怎么就死活不出来呢
查看了easyui.css文件，文件里有该样式：
然后我将“easyui-”去掉，结果文本框变小了，也不符合要求
然后嘛，跟在技术群上问了这个问题。
非常感谢树哥告诉我EasyUI英文在线API网址：
http://www.jeasyui.com/documentation/index.php#
API提供说明如下：
第一种方式不行，我就尝试了第二种方式，结果报如下错误：
Uncaught TypeError: $(...).textbox is not a function
在群上最终也没有得到答案。
突然想起EasyUI的压缩包里有Demo，看了Demo发现如下：
将其套入到我应用中，得到了想要的结果：
其实EasyUI1.3.6尚未引入textbox组件，在EasyiUI1.4以上的版本才能使用：
另外发现一开发神器：
Eclipse反编译插件 ：Eclipse Class Decompiler
附件列表
扫一扫
2083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
