EasyUI + Spring MVC + hibernate实现增删改查导入导出

(这是一个故事……)

前言

用作一个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底时空花在了前者数据展示暨前端后台数据交互上。

大多数细节之问题,都用前端的拍卖,同时为欲后台的配合。


开项目绝对不能够盲目上马,必须优先控核心的理论知识。


首先展示一下效果:

图片 1

EasyUI

其举行出来的用是一个富客户端。

大体的表征是:所有资源文件才加载同差,页面局部刷新,所有请求都基于ajax请求,所有打开的tab页在与一个浏览器窗口算是跟一个页面,这个就算使留心当通过id(在和一个页面应该是绝无仅有的)或者name(如果与一个页面在同样的name)获取页面元素的价时之问题。


树菜单

图片 2

及时是独4级菜单,在一个表中,每一行数含有以上4单列。根据Hibernate一个实体bean对应一个发明底想想,这4列就是bean的4个属性。在全方位职能要求中,都是针对性单表进行操作。

食谱要求的层级关系呢:所属城市 =》 设备档次 =》 设备型号 =》
设备名,即对一个装置开展分类显示。

于培养菜单,现成的插件有EasyUI自带的插件与zTree。因为自己事先发生硌过zTree,但尚从来不因此了EasyUI的树菜单插件,所以自己所以zTree实现即同样力量。(我加入了zTree的技术交流群(1806431),群老大就是写zTree插件的人头,他告我,基于EasyUI开发来说,其实用EasyUI自带养菜单插件更好,而且它们本身之树菜单功能强大,整合得又好。后续会念,暂时是故zTree实现了)

zTree支持有限种植格式的JSON数据:

图片 3

图片 4

阳台提供了一个zTree的实业bean。

图片 5

方的习性与zTree的插件本身定义的特性是逐一对应的,这样可以便宜转换成JSON之后一直生成树菜单,而并非再指定属性。

需留意的凡:url赋的值默认就是是以zTree的树菜单着之a标签的href的价。在EasyUI中,当点击菜单节点,会打开一个新的浏览器窗口,这肯定是免符合要求的。API中如下说明,可以另行对属性,其他更对属性原理同,具体查看API。

图片 6

Spring MVC返回JSON需要加上@ResponseBody注解

图片 7

根据自己的bean生成的JSON为正式JSON格式,可以一直行使(我同一开始还傻傻的拿它们拆来拼成简单格式的JSON,后来察觉傻了~)

图片 8

图片 9

图片 10

图片 11

自家指定当节点被点击时实行onClick()函数

图片 12

图片 13

有关JAVA,首先不晓好不好,但还是促成了,分享一下本身的思绪:
1、从数据库获取具有的装置信息

2、遍历将设备信息仍城市分类

图片 14

3、遍历Map,将List传入添加子结点

图片 15

4、同理先分类,再用List传入进行下一级分类,最后抱的就是一个培训结构

当时功能,第一糟啊是约这样的思绪,但是查数据库实现分类的,结果翻了N次数据库,那必然是不行的,然后就改变化了这么单查看同一不行数据库,再遍历处理数据。虽然写得无是甚好,但力量是落实了。期待再次好之笔触~


查询

查询包括了模糊查询及分页查询

图片 16

图片 17

新手做这个力量的早晚都是平步一步慢慢演变成为完全意义的。(过程略……)

为确保查询条件的非换,我得设置一个藏的表单,存储查询条件,当点击分页工具栏的按钮时,获取隐藏表单的多寡作为分页条件,进行分页查询。所以当我们点击查询按钮的当儿,实际上先用表单中之数赋值到隐藏表单中,然后触发分页查询。通过$(‘#dTable’).datagrid(‘reload’);即可以重新加载表格。

图片 18

 

EasyUI获取下拉或者日期控件的值需要以控件的章程去抱

当EasyUI中,每一个控件都含属性,事件与章程。

大致用法是:

$(“#id”).控件名(‘方法名’, {

    属性名:属性值,

    事件名:function(){

    }

});

实际的翻API


新增和改

其一仿佛简单独力量,但传播后台java处理是指向应同一个处理。对应之凡saveOrUpdate方法。

hibernate中提供了saveOrUpdate方法实现保存要更新操作。

saveOrUpdate方法:如果安了主键则实行update操作,如果主键为null(null和“”是出分之,jsp获取到之空值为””,我们需要以那个置为null)则行inset操作

图片 19

至于前端页面,肯定打开的凡与一个窗口,但是点击【新增】和【更新】按钮时需修改窗口内的照应价值,最后收获取值通过Ajax提交即可。

图片 20图片 21


删除

抹和新增、跟新都需要为艺术添加事务注解,否则运行无报错,但数据库数据死活不变换

图片 22


顶此地,应该小心到,新增、修改、删除都指向设备信息造成影响,那么我们应当再次取得菜单与表格的数目,同时下拉框(我的下拉捎是眼下存在在数据库的归类)的数额为使相应变更。


导入/上传

图片 23

酷上传的地点后来个/,我搞了半天上传不了,结果是不见了一个/

图片 24

着力还是定点的


导出/下载

Spring
MVC的下载呢是对立稳定的,最后回到的凡一个byte数组,只要拿用下载的始末转换为byte数组,就可以实现下载。

图片 25

图片 26

简简单单地经过window.open就足以打开下载的窗口

图片 27

而是当自己透过window.open传递中文时不时,出现乱码,经查看资料,可以为此过encodeURL编码url,然后于JAVA重经URLDecoder.decode解码即可缓解中文乱码问题


POI读写

要就是核心步骤:

1、创建Excel工作簿:Workbook

2、在Workbook创建工作表Sheet

3、在Sheet创建行Row

4、在行Row创建单元格Cell

图片 28

对于Excel,POI有三单实现了Workbook接口的靶子,分别是:

HSSFWorkbook:主要用于创造2003版格式的Excel,文件后缀为.xls,数据量大会报错

XSSFWorkbook:主要用于创造2007本格式的Excel,文件后缀为.xlsx,对于数据量大待运用此类

SXSSFWorkbook:扩展了XSSFWorkbook,提高了性

图片 29

这般就足以生成baye数组


长距离验证

<input class=”easyui-textbox easyui-validatebox” type=”text” id=”wid” name=”id” required=”true” invalidmessage=”设备ID已是”  missingMessage=”设备ID不能够为空” validType=”remote[‘validateId’, ‘id’]” />

来材料展示采用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

先是非常感谢
大方一干将 一丝不苟的情态,从图中就是盼了自的题目,并慷慨之吗自我指出。

首先症状就是是要图, 这半只文本框的边框和其它控件的无均等。

图片 30

而是呀,我委是按部就班网上的装做的了呀,怎么就颇在不下呢

图片 31

 查看了easyui.css文件,文件里有该体:

图片 32

 然后我拿“easyui-”去丢,结果文本框变多少了,也不符合要求

图片 33

 然后嘛,跟于技能群上问了是问题。

非常感谢树哥告诉我EasyUI英文在线API网址:

http://www.jeasyui.com/documentation/index.php\#

API提供证明如下:

图片 34

率先栽艺术非常,我便尝试了次种方式,结果报如下错误:

Uncaught TypeError: $(…).textbox is not a function

图片 35

  以群上最终也没收获答案。

黑马想起EasyUI的压缩包里发出Demo,看了Demo发现如下:

图片 36

 图片 37

<style
scoped=”scoped”>说明该体是那个父元素范围外立竿见影。具体说明,可参看:http://blog.csdn.net/chelen\_jak/article/details/18092947

 将那个套入到自家以中,得到了相思要之结果:

图片 38

 其实EasyUI1.3.6不曾引入textbox组件,在EasyiUI1.4上述的版本才能够动用:

图片 39


此外发现同支付神器:

Eclipse反编译插件 :Eclipse Class Decompiler

插件安装使用教程:http://www.blogjava.net/DLevin/archive/2012/11/02/390685.html


根源为了解笔记(Wiz)

附件列表

 

相关文章