EasyUI学习笔记8:MIS开发利器_ datagrid插件(下)(终结篇)
為什么80%的碼農都做不了架構師?>>> ??
一、引言
最后一篇是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數據格式如下:
需要提醒的是,這里的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>?{@Autowiredprivate?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);}@Overridepublic?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); }相信看到這,邏輯你已經清楚了。
運行界面和之前沒什么變化,只是數據換成了從后臺讀取。另外,增刪改等操作、分頁、排序都可以使用了。
轉載于:https://my.oschina.net/ooad/blog/395259
總結
以上是生活随笔為你收集整理的EasyUI学习笔记8:MIS开发利器_ datagrid插件(下)(终结篇)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 创造与魔法氤氲之息刷新位置在哪里?创造与
- 下一篇: poj 1995 Raising Mod