DWZ + SSH DEMO 说明.pptx

,DWZ+SSHDEMO说明,2020年5月22日,DWZ概述,DWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源框架.DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级DWZ框架支持用html扩展的方式来代替javascript代码,只要懂html语法,再参考DWZ使用手册就可以做ajax开发.DWZ富客户端框架是开源项目,可以免费获取源码.希望有多的开发人员使用,共同推进国内整体ajax开发水平.在线演示地址http:/j-,总体框架设计,主页功能说明,主页,DWZ初始化,Head信息,滑动菜单,主页文件说明,技术实现-DWZ初始化,DWZ初始化：在引入必要的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:“orderDirection”,/排序参数【可选】debug:false,/调试模式【true|false】callback:function()initEnv();$(“#themeList”).theme(themeBase:“themes”);/主题/themeBase相对于index页面的主题base路径););,技术实现-滑动菜单,滑动菜单：滑动菜单+树Folder常用功能常用功能批量删除,参数说明accordionHeader：菜单头部信息accordionContent：菜单内容信息tree：树形结构,技术实现-打开页面,打开页面：打开navTab页面用户管理弹出dialog页面添加,参数说明target：navTab/dialog打开页面类型rel：打开页面的IDtitle：自定义标题,用户管理功能说明,用户管理,列表（分页、排序）,添加,修改,删除,检索,导出Excel,用户管理文件说明,技术实现分页,分页：/,技术实现-分页2,分页控件：参照：pageBar.jsp,参数说明pageNum：当前是第几页numPerPage：每页显示记录数totalCount：总记录数pageNumShown：页标数字多少个,技术实现-排序,列表排序：width=120class=STATUS状态,参数说明orderField：排序字段orderDirection：按升序/降序排序,技术实现检索,检索：关键字：alt=请输入用户名/用户名检索,参数说明navTabSearch：ajax表单查询(navTab的情况)dialogSearch：ajax表单查询(dialog的情况),技术实现-列表（服务器端）,Java端处理：取得参数：this.getKeyword();/检索关键字this.getOrderField();/排序字段this.getOrderDirection();/升序/降序数据设置：/设置起始条数intpageNum=this.getPageNum()0?this.getPageNum()-1:0;intstartIndex=pageNum*getNumPerPage();/设置总数this.setTotalCount(50);Dao调用：dao.findByQuery(sb.toString(),startIndex,numPerPage);,技术实现-Ajax表单,navTab（修改用户）,ajaxTodo（删除用户）,Diglog(添加用户),技术实现-Ajax表单提交（服务器端）,服务器端响应Ajax表单提交后服务器端需要返回以下json代码：“statusCode”:“200”,/操作的状态code值“message”:“批量删除操作成功”,/消息“navTabId”:“”,/navTab的ID“rel”:“”,/跳转页的ID“callbackType”:“closeCurrent”,/回调类型“forwardUrl”:“/跳转的url,Java端处理：设置返回值：returnthis.ajaxForwardSuccess(showUsers,closeCurrent,ComUtil.getI18nText(MIUSER006);,技术实现-列表数据导出,导出列表数据：Export,参数说明dwzExport：添加target=“dwzExport”后框架会自动绑定相应的ajax处理title：确认提示信息,技术实现-列表数据导出（服务器端）,Java端处理：取得参数：this.getKeyword();/检索关键字this.getOrderField();/排序字段this.getOrderDirection();/升序/降序设置返回值：response.setContentType(Application/excel);response.addHeader(Content-Disposition,attachment;filename=userList.xls);,技术实现-页面校验,导出列表数据：form提交时使用validateCallback函数校验输入项class:required、email、url、date、number、digits、creditcard例如：attribute:equalTo、maxlength、minlength、max、min例如：,参数说明validateCallback：先执行校验，在进行ajax提交,常用功能说明,常用功能,suggest,查找带回,级联,添加附件,常用功能文件说明,技术实现-suggest,建议：Suggest新闻标题(Suggest)：新闻编号(Suggest)：,参数说明suggestFields：需要绑定的建议数据（与需要绑定的控件name属性一致）suggestUrl：建议提交的url,技术实现-suggest（服务器端）,服务器端响应Ajax表单提交后服务器端需要返回以下json代码：id:1,newsTitle:技术部,newsNo:1001“,Java端处理：设置返回值：returnsuggestSuccess(mapList);/mapList格式List,技术实现-查找带回,查找带回：Lookup新闻标题：选择新闻(选择新闻)新闻编号：,技术实现-查找带回,newsTitle:,newsNo:)title=选择新闻选择参数说明href：提交actionlookupGroup：查找带回组名（需要绑定的控件name属性为组名.xxx）inputTitle：需要传递查询条件时使用。（名称与需要取值的控件id一致）$.bringBack：配套查找带回工具方法,技术实现-添加附件,Form设置：File控件,参数说明enctype：因为Ajax不支持enctype=multipart/form-data所以用隐藏iframe来处理无刷新表单提交.iframeCallback：创建Iframet的提交file：file控件的name名请命名为file,技术实现-添加附件（服务器端）,Java端处理：取得参数：this.getFile();/取得上传文件数据设置返回值：returnthis.ajaxFileSuccess(,this.getFileFileName(),filrPath,filesize);,技术实现-级联,Form设置：级联菜单所有省市北京上海所有城市,参数说明ref：需要绑定级联的combox控件的idvalue：取得当前选中的值,技术实现-级联（服务器端）,服务器端响应Ajax表单提交后服务器端需要返回以下json代码：ft,丰台,shy,顺义,Java端处理：取得参数：this.getComboxCode()设置返回值：returnthis.cascadeSuccess(map);/map格式：map,批量删除功能说明,批量删除,列表（checkbox）,批量删除,批量删除文件说明,技术实现-批量删除,checkbox：,Ajax提交：批量删除,参数说明group：批量选择checkbox组（列表中每行checkbox的name属性设定为此名称）selectedTodo：批量选择操作ids：checkbox控件的group请命名为ids,技术实现-批量删除（服务器端）,服务器端响应Ajax表单提交后服务器端需要返回以下json代码：statusCode:200,“message”:“批量删除操作成功,navTabId:,rel:,callbackType:,forwardUrl:,Java端处理：取得参数：thi