DWZ + SSH DEMO 說(shuō)明

1、DWZ 概述DWZ富客戶端框架(jQuery RIA framework), 是中國(guó)人自己開(kāi)發(fā)的基于jQuery實(shí)現(xiàn)的Ajax RIA開(kāi)源框架.DWZ富客戶端框架設(shè)計(jì)目標(biāo)是簡(jiǎn)單實(shí)用、擴(kuò)展方便、快速開(kāi)發(fā)、簡(jiǎn)單實(shí)用、擴(kuò)展方便、快速開(kāi)發(fā)、RIA思路、思路、輕量級(jí)輕量級(jí)DWZ框架支持用html擴(kuò)展的方式來(lái)代替javascript代碼, 只要懂html語(yǔ)法, 再參考DWZ使用手冊(cè)就可以做ajax開(kāi)發(fā). DWZ富客戶端框架是開(kāi)源項(xiàng)目, 可以免費(fèi)獲取源碼. 希望有多的開(kāi)發(fā)人員使用, 共同推進(jìn)國(guó)內(nèi)整體ajax開(kāi)發(fā)水平.在線演示地址 http:/j- Code下載: http:/ - DWZ初始化l DWZ初始

2、化： 在 引入必要的js庫(kù) DWZ框架初始化讀取dwz.frag.xml中的頁(yè)面組件碎片代碼. $(function()DWZ.init(styles/dwz.frag.xml, /定義了一些dwz組件碎片和提示信息loginUrl:“l(fā)ogout.action”, / 跳轉(zhuǎn)到登錄頁(yè)statusCode:ok:200, error:300, timeout:301, /【可選】pageInfo:pageNum:“pageNum”, numPerPage:“numPerPage”,/ 分頁(yè)設(shè)參數(shù)置orderField:“orderField”, orderDirection:“orderDire

3、ction”, / 排序參數(shù)【可選】debug:false,/ 調(diào)試模式 【true|false】callback:function()initEnv();$(“#themeList”).theme(themeBase:“themes”); / 主題/ themeBase 相對(duì)于index頁(yè)面的主題base路徑););技術(shù)實(shí)現(xiàn) - 滑動(dòng)菜單l 滑動(dòng)菜單：滑動(dòng)菜單： 滑動(dòng)菜單滑動(dòng)菜單 + 樹(shù)樹(shù) Folder常用功能常用功能批量刪除參數(shù)參數(shù)說(shuō)明說(shuō)明accordionHeader ： 菜單頭部信息accordionContent ：菜單內(nèi)容信息tree ：樹(shù)形結(jié)構(gòu)技術(shù)實(shí)現(xiàn) - 打開(kāi)頁(yè)面l 打開(kāi)頁(yè)面：

4、打開(kāi)頁(yè)面： 打開(kāi)打開(kāi)navTab頁(yè)面頁(yè)面用戶管理 彈彈出出dialog頁(yè)面添加參數(shù)參數(shù)說(shuō)明說(shuō)明target ： navTab/dialog打開(kāi)頁(yè)面類型rel ：打開(kāi)頁(yè)面的IDtitle ：自定義標(biāo)題用戶管理功能說(shuō)明用戶管理列表（分頁(yè)、排序）添加修改刪除檢索導(dǎo)出Excel用戶管理文件說(shuō)明JSPStruts2配置文件配置文件action配置名配置名Action類類Service類類Dao類類userList.jspstruts-user.xml初始頁(yè)面/檢索：toUserList刪除用戶：deleteUser導(dǎo)出用戶：exportUsersUserAction.javaUserServiceImp

5、l.javaIUserDao.javaaddUser.jsp同上跳轉(zhuǎn)頁(yè)面：toAddUser添加用戶：addUser同上同上同上editUser.jsp同上跳轉(zhuǎn)頁(yè)面toEditUser修改用戶：editUser同上同上同上技術(shù)實(shí)現(xiàn) 分頁(yè) l 分頁(yè)分頁(yè)：input type=hidden name=status value=input type=hidden name=orderField value=/input type=hidden name=orderDirection value=/input type=hidden name=keyword value=/input type=hid

6、den name=numPerPage value=/技術(shù)實(shí)現(xiàn) - 分頁(yè)2l 分頁(yè)控件：分頁(yè)控件： 參照：參照：pageBar.jsp參數(shù)參數(shù)說(shuō)明說(shuō)明pageNum：當(dāng)前是第幾頁(yè)numPerPage：每頁(yè)顯示記錄數(shù)totalCount：總記錄數(shù)pageNumShown：頁(yè)標(biāo)數(shù)字多少個(gè)技術(shù)實(shí)現(xiàn) - 排序l 列表排序：列表排序：th orderField=status class= width=120 class=STATUS狀態(tài)參數(shù)參數(shù)說(shuō)明說(shuō)明orderField ：排序字段orderDirection ：按升序/降序排序技術(shù)實(shí)現(xiàn) 檢索l 檢索檢索：關(guān)鍵字：input type=text nam

7、e=keyword value= alt=請(qǐng)輸入用戶名/ 用戶名檢索參數(shù)參數(shù)說(shuō)明說(shuō)明navTabSearch： ajax表單表單查詢查詢(navTab的情況)dialogSearch ：ajax表單查詢表單查詢(dialog的情況)技術(shù)實(shí)現(xiàn) - 列表（服務(wù)器端）Java端處理：端處理： 取得參數(shù)取得參數(shù)：this.getKeyword(); /檢索關(guān)鍵字檢索關(guān)鍵字this.getOrderField(); /排序字段排序字段this.getOrderDirection(); /升序升序/降序降序 數(shù)據(jù)設(shè)置：數(shù)據(jù)設(shè)置：/設(shè)置起始條數(shù)設(shè)置起始條數(shù)int pageNum = this.getPage

8、Num() 0 ? this.getPageNum() - 1 : 0; int startIndex = pageNum * getNumPerPage(); /設(shè)置設(shè)置總數(shù)總數(shù)this.setTotalCount(50); Dao調(diào)用：調(diào)用：dao.findByQuery(sb.toString(), startIndex, numPerPage);技術(shù)實(shí)現(xiàn) - Ajax表單表單l navTab（修改用戶）（修改用戶） l ajaxTodo （刪除用戶）（刪除用戶） l Diglog (添加用戶添加用戶) 技術(shù)實(shí)現(xiàn) - Ajax表單提交（服務(wù)器端）服務(wù)器端響應(yīng)服務(wù)器端響應(yīng) Ajax表單提交

9、后服務(wù)器端需要返回以下json代碼： “statusCode”:“200”, / 操作的狀態(tài)code值 “message”:“批量刪除操作成功”, / 消息 “navTabId”:“”, / navTab的ID “rel”:“”, / 跳轉(zhuǎn)頁(yè)的ID “callbackType”:“ closeCurrent”, / 回調(diào)類型 “forwardUrl”:“ / 跳轉(zhuǎn)的urlJava端處理：端處理： 設(shè)置返回值：設(shè)置返回值：return this.ajaxForwardSuccess(showUsers,closeCurrent,ComUtil.getI18nText(MIUSER006);技術(shù)實(shí)

10、現(xiàn) - 列表數(shù)據(jù)導(dǎo)出l 導(dǎo)出列表數(shù)據(jù)：導(dǎo)出列表數(shù)據(jù)： Export 參數(shù)參數(shù)說(shuō)明說(shuō)明dwzExport ：添加target=“dwzExport” 后框架會(huì)自動(dòng)綁定相應(yīng)的ajax處理title：確認(rèn)提示信息技術(shù)實(shí)現(xiàn) - 列表數(shù)據(jù)導(dǎo)出（服務(wù)器端）l Java端處理：端處理： 取得參數(shù)取得參數(shù)：this.getKeyword(); /檢索關(guān)鍵字檢索關(guān)鍵字this.getOrderField(); /排序字段排序字段this.getOrderDirection(); /升序升序/降序降序 設(shè)置返回值：設(shè)置返回值：response.setContentType(Application/excel);r

11、esponse.addHeader(Content-Disposition,attachment;filename=userList.xls);技術(shù)實(shí)現(xiàn) - 頁(yè)面校驗(yàn)l 導(dǎo)出列表數(shù)據(jù)：導(dǎo)出列表數(shù)據(jù)： form提交時(shí)使用validateCallback函數(shù) 校驗(yàn)輸入項(xiàng)class: required、email、url、date、number、digits、creditcard 例如：attribute: equalTo、maxlength、minlength、max、min例如：參數(shù)參數(shù)說(shuō)明說(shuō)明validateCallback ：先執(zhí)行校驗(yàn)，在進(jìn)行ajax提交常用功能說(shuō)明常用功能suggest查

12、找?guī)Щ丶?jí)聯(lián)添加附件常用功能文件說(shuō)明JSPStruts2配置文件配置文件action配置名配置名Action類類Service類類Dao類類selectNews.jspstruts-news.xml初始頁(yè)面：toSelectNews建議：newsSuggest級(jí)聯(lián)：comboxCascadeNewsAction.javaNewsServiceImpl.javaINewsDao.javanewsLookup.jsp同上查找?guī)Щ仨?yè)面：newsLookup同上同上同上uploadNewsFile.jsp同上彈出上傳頁(yè)：uploadNewsFile上傳文件：saveUploadNewsFile同上同上同

13、上技術(shù)實(shí)現(xiàn) - suggestl 建議建議：Suggest新聞標(biāo)題(Suggest)：新聞編號(hào)(Suggest)：參數(shù)參數(shù)說(shuō)明說(shuō)明suggestFields ：需要綁定的建議數(shù)據(jù)（與需要綁定的控件name屬性一致）suggestUrl ：建議提交的url技術(shù)實(shí)現(xiàn) - suggest（服務(wù)器端）l 服務(wù)器端響應(yīng)服務(wù)器端響應(yīng) Ajax表單提交后服務(wù)器端需要返回以下json代碼： id:1,newsTitle:技術(shù)部,newsNo:1001“ l Java端處理：端處理： 設(shè)置返回值：設(shè)置返回值：return suggestSuccess(mapList); /mapList格式格式ListLink

14、edHashMap技術(shù)實(shí)現(xiàn) - 查找?guī)Щ豯 查找?guī)Щ兀翰檎規(guī)Щ兀篖ookup新聞標(biāo)題：選擇新聞(選擇新聞)新聞編號(hào)：技術(shù)實(shí)現(xiàn) - 查找?guī)Щ豠 class=btnSelect href=javascript:$.bringBack(id:, newsTitle:, newsNo:) title=選擇新聞選擇參數(shù)參數(shù)說(shuō)明說(shuō)明href ：提交actionlookupGroup：查找?guī)Щ亟M名（需要綁定的控件name屬性為組名.xxx）inputTitle： 需要傳遞查詢條件時(shí)使用。（名稱與需要取值的控件id一致）$.bringBack：配套查找?guī)Щ毓ぞ叻椒夹g(shù)實(shí)現(xiàn) - 添加附件l Form設(shè)置：設(shè)置：

15、l File控件控件參數(shù)參數(shù)說(shuō)明說(shuō)明enctype ：因?yàn)锳jax不支持enctype=multipart/form-data 所以用隱藏iframe來(lái)處理無(wú)刷新表單提交.iframeCallback：創(chuàng)建Iframet的提交file：file控件的name名請(qǐng)命名為file技術(shù)實(shí)現(xiàn) - 添加附件（服務(wù)器端）l Java端處理：端處理： 取得參數(shù)：取得參數(shù)：this.getFile(); /取得上傳文件數(shù)據(jù)取得上傳文件數(shù)據(jù) 設(shè)置返回值：設(shè)置返回值：return this.ajaxFileSuccess(, this.getFileFileName(), filrPath, filesize);

16、技術(shù)實(shí)現(xiàn) - 級(jí)聯(lián)l Form設(shè)置：設(shè)置：級(jí)聯(lián)菜單所有省市北京上海所有城市參數(shù)參數(shù)說(shuō)明說(shuō)明ref ：需要綁定級(jí)聯(lián)的combox控件的idvalue：取得當(dāng)前選中的值技術(shù)實(shí)現(xiàn) - 級(jí)聯(lián)（服務(wù)器端）l 服務(wù)器端響應(yīng)服務(wù)器端響應(yīng) Ajax表單提交后服務(wù)器端需要返回以下json代碼： ft, 豐臺(tái), shy, 順義l Java端處理：端處理： 取得參數(shù)：取得參數(shù)：this. getComboxCode() 設(shè)置返回值：設(shè)置返回值：return this.cascadeSuccess(map); /map格式：格式：map批量刪除功能說(shuō)明批量刪除列表（checkbox）批量刪除批量刪除文件說(shuō)明JSPSt

17、ruts2配置文件配置文件action配置名配置名Action類類Service類類Dao類類batchDelete.jspstruts-user.xml跳轉(zhuǎn)頁(yè)面：toBatchDeleteList批量刪除：batchDeleteUserAction.javaUserServiceImpl.javaIUserDao.java技術(shù)實(shí)現(xiàn) - 批量刪除l checkbox：l Ajax提交：提交：批量刪除參數(shù)參數(shù)說(shuō)明說(shuō)明group ：批量選擇checkbox組（列表中每行checkbox的name屬性設(shè)定為此名稱）selectedTodo：批量選擇操作ids：checkbox控件的group請(qǐng)命名為ids技術(shù)實(shí)現(xiàn) - 批量刪除（服務(wù)器端）l 服務(wù)器端響應(yīng)服務(wù)器端響應(yīng) Ajax表單提交后服務(wù)器端需要返回以下json代碼： statusCode:200, “message”:“批量刪除操作成功, navTabId:, rel:, callbackType:, forwa