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替代了Strut二、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，首先不知道好很差，但仍是實現了，分享一下個人思路：
一、從數據庫獲取全部的設備信息

二、遍歷將設備信息按城市分類

三、遍歷Map，將List傳入添加子結點

四、同理先分類，再將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讀寫

主要就基本步驟：

一、建立 Excel 工做簿 ：Workbook

二、在Workbook建立工做表Sheet

三、在Sheet建立行Row

四、在行Row建立單元格Cell

對於Excel，POI有三個實現了Workbook接口的對象，分別是：

HSSFWorkbook：主要用於建立2003版格式的Excel，文件後綴爲.xls，數據量大會報錯

XSSFWorkbook：主要用於建立2007版格式的Excel，文件後綴爲.xlsx，對於數據量大須要使用此類

SXSSFWorkbook：擴展了XSSFWorkbook，提升了性能

這樣就能夠生成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

首先很是感謝 瀟灑一劍 一絲不苟的態度，從圖片中就看出了個人問題，並慷慨的爲我指出。

首先症狀就是如圖，  這兩個文本框的邊框跟其餘控件的不一致。

可是呀，個人確是按照網上的設置作的了呀，怎麼就死活不出來呢

 查看了easyui.css文件，文件裏有該樣式：

 而後我將「easyui-」去掉，結果文本框變小了，也不符合要求

 而後嘛，跟在技術羣上問了這個問題。

很是感謝樹哥告訴我EasyUI英文在線API網址：

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

API提供說明以下：

第一種方式不行，我就嘗試了第二種方式，結果報以下錯誤：

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

   在羣上最終也沒有獲得答案。

忽然想起EasyUI的壓縮包裏有Demo，看了Demo發現以下：

 

<style scoped="scoped">說明該樣式是其父元素範圍內有效。具體說明，可參考：http://blog.csdn.net/chelen_jak/article/details/18092947

 將其套入到我應用中，獲得了想要的結果：

 其實EasyUI1.3.6還沒有引入textbox組件，在EasyiUI1.4以上的版本才能使用：

---

另外發現一開發神器：

Eclipse反編譯插件 ：Eclipse Class Decompiler

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

---

來自爲知筆記(Wiz)

附件列表