DWZ + SSH DEMO 說明

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

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

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

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

5、l.javaIUserDao.javaaddUser.jsp同上跳轉頁面：toAddUser添加用戶：addUser同上同上同上editUser.jsp同上跳轉頁面toEditUser修改用戶：editUser同上同上同上技術實現(xiàn) 分頁 l 分頁分頁：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=/技術實現(xiàn) - 分頁2l 分頁控件：分頁控件： 參照：參照：pageBar.jsp參數(shù)參數(shù)說明說明pageNum：當前是第幾頁numPerPage：每頁顯示記錄數(shù)totalCount：總記錄數(shù)pageNumShown：頁標數(shù)字多少個技術實現(xiàn) - 排序l 列表排序：列表排序：th orderField=status class= width=120 class=STATUS狀態(tài)參數(shù)參數(shù)說明說明orderField ：排序字段orderDirection ：按升序/降序排序技術實現(xiàn) 檢索l 檢索檢索：關鍵字：input type=text nam

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

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

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

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

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

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

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

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

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

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

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