DWZ + SSH DEMO 说明

1、DWZ 概述DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、简单实用、扩展方便、快速开发、RIA思路、思路、轻量级轻量级DWZ框架支持用html扩展的方式来代替javascript代码, 只要懂html语法, 再参考DWZ使用手册就可以做ajax开发. DWZ富客户端框架是开源项目, 可以免费获取源码. 希望有多的开发人员使用, 共同推进国内整体ajax开发水平.在线演示地址 http:/j- Code下载: http:/ - DWZ初始化l DWZ初始

2、化： 在 引入必要的js库 DWZ框架初始化读取dwz.frag.xml中的页面组件碎片代码. $(function()DWZ.init(styles/dwz.frag.xml, /定义了一些dwz组件碎片和提示信息loginUrl:“logout.action”, / 跳转到登录页statusCode:ok:200, error:300, timeout:301, /【可选】pageInfo:pageNum:“pageNum”, numPerPage:“numPerPage”,/ 分页设参数置orderField:“orderField”, orderDirection:“orderDire

3、ction”, / 排序参数【可选】debug:false,/ 调试模式 【true|false】callback:function()initEnv();$(“#themeList”).theme(themeBase:“themes”); / 主题/ themeBase 相对于index页面的主题base路径););技术实现 - 滑动菜单l 滑动菜单：滑动菜单： 滑动菜单滑动菜单 + 树树 Folder常用功能常用功能批量删除参数参数说明说明accordionHeader ： 菜单头部信息accordionContent ：菜单内容信息tree ：树形结构技术实现 - 打开页面l 打开页面：

4、打开页面： 打开打开navTab页面页面用户管理 弹弹出出dialog页面添加参数参数说明说明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同上同上同上技术实现 分页 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=/技术实现 - 分页2l 分页控件：分页控件： 参照：参照：pageBar.jsp参数参数说明说明pageNum：当前是第几页numPerPage：每页显示记录数totalCount：总记录数pageNumShown：页标数字多少个技术实现 - 排序l 列表排序：列表排序：th orderField=status class= width=120 class=STATUS状态参数参数说明说明orderField ：排序字段orderDirection ：按升序/降序排序技术实现 检索l 检索检索：关键字：input type=text nam

7、e=keyword value= alt=请输入用户名/ 用户名检索参数参数说明说明navTabSearch： ajax表单表单查询查询(navTab的情况)dialogSearch ：ajax表单查询表单查询(dialog的情况)技术实现 - 列表（服务器端）Java端处理：端处理： 取得参数取得参数：this.getKeyword(); /检索关键字检索关键字this.getOrderField(); /排序字段排序字段this.getOrderDirection(); /升序升序/降序降序 数据设置：数据设置：/设置起始条数设置起始条数int pageNum = this.getPage

8、Num() 0 ? this.getPageNum() - 1 : 0; int startIndex = pageNum * getNumPerPage(); /设置设置总数总数this.setTotalCount(50); Dao调用：调用：dao.findByQuery(sb.toString(), startIndex, numPerPage);技术实现 - Ajax表单表单l navTab（修改用户）（修改用户） l ajaxTodo （删除用户）（删除用户） l Diglog (添加用户添加用户) 技术实现 - Ajax表单提交（服务器端）服务器端响应服务器端响应 Ajax表单提交

9、后服务器端需要返回以下json代码： “statusCode”:“200”, / 操作的状态code值 “message”:“批量删除操作成功”, / 消息 “navTabId”:“”, / navTab的ID “rel”:“”, / 跳转页的ID “callbackType”:“ closeCurrent”, / 回调类型 “forwardUrl”:“ / 跳转的urlJava端处理：端处理： 设置返回值：设置返回值：return this.ajaxForwardSuccess(showUsers,closeCurrent,ComUtil.getI18nText(MIUSER006);技术实

10、现 - 列表数据导出l 导出列表数据：导出列表数据： Export 参数参数说明说明dwzExport ：添加target=“dwzExport” 后框架会自动绑定相应的ajax处理title：确认提示信息技术实现 - 列表数据导出（服务器端）l Java端处理：端处理： 取得参数取得参数：this.getKeyword(); /检索关键字检索关键字this.getOrderField(); /排序字段排序字段this.getOrderDirection(); /升序升序/降序降序 设置返回值：设置返回值：response.setContentType(Application/excel);r

11、esponse.addHeader(Content-Disposition,attachment;filename=userList.xls);技术实现 - 页面校验l 导出列表数据：导出列表数据： form提交时使用validateCallback函数 校验输入项class: required、email、url、date、number、digits、creditcard 例如：attribute: equalTo、maxlength、minlength、max、min例如：参数参数说明说明validateCallback ：先执行校验，在进行ajax提交常用功能说明常用功能suggest查

12、找带回级联添加附件常用功能文件说明JSPStruts2配置文件配置文件action配置名配置名Action类类Service类类Dao类类selectNews.jspstruts-news.xml初始页面：toSelectNews建议：newsSuggest级联：comboxCascadeNewsAction.javaNewsServiceImpl.javaINewsDao.javanewsLookup.jsp同上查找带回页面：newsLookup同上同上同上uploadNewsFile.jsp同上弹出上传页：uploadNewsFile上传文件：saveUploadNewsFile同上同上同

13、上技术实现 - suggestl 建议建议：Suggest新闻标题(Suggest)：新闻编号(Suggest)：参数参数说明说明suggestFields ：需要绑定的建议数据（与需要绑定的控件name属性一致）suggestUrl ：建议提交的url技术实现 - suggest（服务器端）l 服务器端响应服务器端响应 Ajax表单提交后服务器端需要返回以下json代码： id:1,newsTitle:技术部,newsNo:1001“ l Java端处理：端处理： 设置返回值：设置返回值：return suggestSuccess(mapList); /mapList格式格式ListLink

14、edHashMap技术实现 - 查找带回l 查找带回：查找带回：Lookup新闻标题：选择新闻(选择新闻)新闻编号：技术实现 - 查找带回a class=btnSelect href=javascript:$.bringBack(id:, newsTitle:, newsNo:) title=选择新闻选择参数参数说明说明href ：提交actionlookupGroup：查找带回组名（需要绑定的控件name属性为组名.xxx）inputTitle： 需要传递查询条件时使用。（名称与需要取值的控件id一致）$.bringBack：配套查找带回工具方法技术实现 - 添加附件l Form设置：设置：

15、l File控件控件参数参数说明说明enctype ：因为Ajax不支持enctype=multipart/form-data 所以用隐藏iframe来处理无刷新表单提交.iframeCallback：创建Iframet的提交file：file控件的name名请命名为file技术实现 - 添加附件（服务器端）l Java端处理：端处理： 取得参数：取得参数：this.getFile(); /取得上传文件数据取得上传文件数据 设置返回值：设置返回值：return this.ajaxFileSuccess(, this.getFileFileName(), filrPath, filesize);

16、技术实现 - 级联l Form设置：设置：级联菜单所有省市北京上海所有城市参数参数说明说明ref ：需要绑定级联的combox控件的idvalue：取得当前选中的值技术实现 - 级联（服务器端）l 服务器端响应服务器端响应 Ajax表单提交后服务器端需要返回以下json代码： ft, 丰台, shy, 顺义l Java端处理：端处理： 取得参数：取得参数：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技术实现 - 批量删除l checkbox：l Ajax提交：提交：批量删除参数参数说明说明group ：批量选择checkbox组（列表中每行checkbox的name属性设定为此名称）selectedTodo：批量选择操作ids：checkbox控件的group请命名为ids技术实现 - 批量删除（服务器端）l 服务器端响应服务器端响应 Ajax表单提交后服务器端需要返回以下json代码： statusCode:200, “message”:“批量删除操作成功, navTabId:, rel:, callbackType:, forwa